/*
 * gp-site-shared.css — shared cinematic UI (homepage + static pages)
 * Load after theme.css / before or after page-specific overrides.
 */

/* ── Hero CTA subtle pulse (homepage) ── */
body.home-page .hero-primary-cta.hero-cta-pulse {
  animation: gp-hero-cta-pulse 2.2s ease-in-out infinite !important;
}

@keyframes gp-hero-cta-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 28px rgba(34, 197, 94, 0.45), 0 0 0 0 rgba(74, 222, 128, 0.35);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 12px 36px rgba(34, 197, 94, 0.55), 0 0 0 8px rgba(74, 222, 128, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .hero-primary-cta.hero-cta-pulse {
    animation: none !important;
  }
}

/* ── Hero background — pan left to show more course ── */
body.home-page .hero-cin-wrap.gp-cin-hero-panel,
body.home-page .gp-cin-hero-panel {
  background-position: 22% 42% !important;
}

@media (max-width: 767px) {
  body.home-page .hero-cin-wrap.gp-cin-hero-panel,
  body.home-page .gp-cin-hero-panel,
  body.gp-static-page .gp-static-hero-panel {
    background:
      linear-gradient(125deg, rgba(4, 11, 7, 0.42) 0%, rgba(8, 20, 12, 0.26) 50%, rgba(4, 11, 7, 0.18) 100%),
      url("/images/hero_cellphone.png") center center / cover no-repeat !important;
    background-position: center center !important;
  }
}

@media (max-width: 768px) {
  body.home-page .hero-cin-wrap.gp-cin-hero-panel,
  body.home-page .gp-cin-hero-panel {
    background-position: center center !important;
  }
}

/* ── Proof / product tiles — icon left of text (compact height) ── */
body.home-page .proof-tile,
body.gp-static-page .proof-tile {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 0.5rem !important;
  row-gap: 0.1rem !important;
  align-items: start !important;
  padding: 0.5rem 0.6rem !important;
  min-height: 0 !important;
}

body.home-page .proof-tile-icon,
body.gp-static-page .proof-tile-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

body.home-page .proof-tile .proof-value,
body.gp-static-page .proof-tile .proof-value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(0.8rem, 1.35vw, 0.95rem) !important;
  line-height: 1.15 !important;
}

body.home-page .proof-tile .proof-label,
body.gp-static-page .proof-tile .proof-label {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.7rem !important;
}

body.home-page .proof-tile .proof-note,
body.gp-static-page .proof-tile .proof-note {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.64rem !important;
  line-height: 1.25 !important;
}

body.home-page .proof-tile--stat,
body.gp-static-page .proof-tile--stat {
  grid-template-rows: auto auto !important;
}

body.home-page .proof-tile--stat .proof-tile-icon,
body.gp-static-page .proof-tile--stat .proof-tile-icon {
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

body.home-page .proof-tile--stat .proof-value,
body.gp-static-page .proof-tile--stat .proof-value {
  white-space: nowrap !important;
}

body.home-page .proof-tile--stat .proof-note,
body.gp-static-page .proof-tile--stat .proof-note {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* ── Search card title breathing room (+15%) ── */
body.home-page .gp-cin-search-header {
  margin-bottom: 0.58rem !important;
  padding-top: 0.28rem !important;
  padding-bottom: 0.22rem !important;
}

body.home-page .gp-cin-search-title,
body.home-page .gp-cin-search-card #searchTitle {
  margin-top: 0.12rem !important;
  margin-bottom: 0.35rem !important;
}

/* ── Search zone width — align with 1200px content, no horizontal bleed ── */
body.home-page .home-search-wrap,
body.home-page .home-search-wrap.ds-section {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

body.home-page .home-search-wrap .search-area-flex,
body.home-page .home-search-wrap .search-container {
  width: min(1200px, calc(100% - 3rem)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.home-page .home-search-wrap .search-area-flex {
  background: linear-gradient(180deg, #0c2419 0%, #0a1f17 100%) !important;
  border-radius: 0 0 18px 18px !important;
  padding-bottom: 0.7rem !important;
}

/* ── Footer / FAQ bands — background matches 1200px content width ── */
.gp-footer.ds-footer,
.footer.gp-footer {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
}

.gp-footer .gp-footer-inner {
  width: min(1200px, calc(100% - 3rem)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: var(--gp-footer-bg-subtle, var(--gp-footer-bg)) !important;
  background-color: var(--gp-footer-bg) !important;
  border-top: 1px solid var(--gp-footer-border) !important;
  border-radius: 18px 18px 0 0 !important;
  box-sizing: border-box !important;
}

body.home-page .home-faq {
  background: transparent !important;
  border-top: none !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

body.home-page .home-faq-inner {
  width: min(1200px, 100%) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #0a1a12 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  padding: 2.75rem 1.5rem 3rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .gp-footer .gp-footer-inner {
    width: calc(100% - 2rem) !important;
  }

  body.home-page .home-faq {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body.home-page .home-faq-inner {
    padding: 2rem 1rem 2.25rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Task 8 — Desktop header (≥769 px).
   • Nav hyperlinks are centered evenly in the horizontal space between
     the right edge of "Golfapedia" and the left edge of the Select
     Language dropdown (flex: 1 + justify-content: center).
   • Select Language dropdown removes excess whitespace
     (width: fit-content) and is anchored to the right edge of the hero
     container (margin-left: auto).
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  body.home-page .header-container,
  body.gp-static-page .header-container {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 0.45rem !important;
  }

  body.home-page .header-container .logo,
  body.gp-static-page .header-container .logo {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
  }

  body.home-page .header-container nav,
  body.gp-static-page .header-container nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body.home-page .header-container .nav-menu,
  body.gp-static-page .header-container .nav-menu {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 0.2rem !important;
    max-width: 100% !important;
  }

  /* Task 8 — Anchor the language widget to the right edge of the hero/
     header container; collapse any extra whitespace to the right of the
     "Select Language" text inside the select element. */
  body.home-page .header-container .gp-translate-widget,
  body.gp-static-page .header-container .gp-translate-widget,
  .header-container > #google_translate_element.gp-translate-widget {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    max-width: 100% !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  body.home-page .header-container .gp-translate-widget select,
  body.gp-static-page .header-container .gp-translate-widget select,
  .header-container > #google_translate_element.gp-translate-widget select,
  body.home-page .header-container .gp-translate-widget .goog-te-combo,
  body.gp-static-page .header-container .gp-translate-widget .goog-te-combo,
  .header-container > #google_translate_element.gp-translate-widget .goog-te-combo {
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding-right: 1.5rem !important;
  }

  body.home-page .header-container .hamburger,
  body.gp-static-page .header-container .hamburger {
    flex: 0 0 auto !important;
    margin-left: 0.5rem !important;
  }

  /* Task 8 — Body text shifts slightly to the left and stays anchored
     there consistently across every static page.  Targets the hero
     panels and the main content containers so it never re-centers
     unexpectedly. */
  body.gp-static-page .content-section .content-container,
  body.gp-static-page .gp-static-hero-panel,
  body.gp-static-page main,
  body.home-page .gp-static-hero-panel,
  body.home-page .hero-cin-left,
  body.home-page .hero-cin-headline {
    text-align: left !important;
  }
}

@media (min-width: 769px) and (max-width: 1120px) {
  body.home-page .header-container nav,
  body.gp-static-page .header-container nav {
    flex: 1 1 100% !important;
    order: 3 !important;
  }

  body.home-page .header-container .gp-translate-widget,
  body.gp-static-page .header-container .gp-translate-widget,
  .header-container > #google_translate_element.gp-translate-widget {
    order: 2 !important;
    margin-left: auto !important;
  }

  body.home-page .header-container .hamburger,
  body.gp-static-page .header-container .hamburger {
    order: 2 !important;
  }
}

/* Search results grid — equal row/column gaps (stretch was adding empty space under shorter cards) */
body.home-page #search-container .results-grid,
body.home-page #search-container .course-list-grid .results-grid,
body.home-page #results .results-grid {
  align-items: start !important;
  align-content: start !important;
  column-gap: 0.65rem !important;
  row-gap: 0.65rem !important;
  gap: 0.65rem !important;
}

@media (max-width: 767px) {
  body.home-page #search-container .results-grid,
  body.home-page #search-container .course-list-grid .results-grid,
  body.home-page #results .results-grid {
    column-gap: 0.5rem !important;
    row-gap: 0.5rem !important;
    gap: 0.5rem !important;
  }
}

/* Desktop search results: tighter vertical rhythm */
@media (min-width: 768px) {
  body.home-page #search-container.ds-section {
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }

  body.home-page .results-header {
    padding-top: 0.2rem !important;
    margin-bottom: 0.25rem !important;
  }
}

/* Search result card index (grid display order) */
.golf-course-card .cin-result-index {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  /* ~15% darker than the previous rgba(0,0,0,0.32) so the white result count reads clearly. */
  background: rgba(0, 0, 0, 0.47);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0.02em;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  -webkit-font-smoothing: antialiased;
}

body.gp-static-page .directory-marketplace .golf-course-card .cin-result-index {
  top: 0.45rem;
  left: 0.5rem;
}

/* Search results — load more pagination */
body.home-page #results .gp-results-load-more,
#results .gp-results-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  /* Balanced, compact spacing above and below the "Show More Golf Courses" button (equal top/bottom). */
  margin: 1rem auto;
  padding: 0 1rem 1rem;
  max-width: 36rem;
  text-align: center;
}

body.home-page #results .gp-results-load-more-btn,
#results .gp-results-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.35rem;
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.22) 0%, rgba(22, 163, 74, 0.32) 100%);
  color: #ecfdf5;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

body.home-page #results .gp-results-load-more-btn:hover:not(:disabled),
#results .gp-results-load-more-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.28);
}

body.home-page #results .gp-results-load-more-btn:disabled,
#results .gp-results-load-more-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}

body.home-page #results .gp-results-load-more.is-loading,
#results .gp-results-load-more.is-loading {
  pointer-events: none;
}

body.home-page #results .gp-results-load-more-spinner,
#results .gp-results-load-more-spinner {
  margin: 0 auto 0.25rem;
  padding: 0.5rem 0 0.15rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.home-page #results .gp-results-load-more-spinner .search-loading-text,
#results .gp-results-load-more-spinner .search-loading-text {
  margin: 0.65rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 600;
}

body.home-page #results .gp-results-load-more-error,
#results .gp-results-load-more-error {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #fca5a5;
  max-width: 28rem;
}

/* Footer status is screen-reader only */

@media (max-width: 640px) {
  body.home-page .home-search-wrap .search-area-flex,
  body.home-page .home-search-wrap .search-container {
    width: calc(100% - 2rem) !important;
  }
}

/* ── Homepage results grid: phone / tablet ── */
@media (max-width: 767px) {
  body.home-page #search-container .course-list-grid .results-grid,
  body.home-page #search-container .course-list-grid {
    width: calc(100% - 0.75rem) !important;
    max-width: calc(100% - 0.75rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home-page #search-container .golf-course-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.home-page .golf-course-card .cin-card-photo,
  body.home-page .golf-course-card .cin-card-info {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.home-page .golf-course-card .cin-card-photo .cin-card-info {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 0.5rem) !important;
  }

  body.home-page .golf-course-card .course-card-buttons {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.home-page #search-container .course-list-grid .results-grid,
  body.home-page #search-container .course-list-grid .tree-content:has(> .golf-course-card) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 0.65rem !important;
    row-gap: 0.65rem !important;
    gap: 0.65rem !important;
    width: min(920px, calc(100% - 2rem)) !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
}

/* Desktop: center results band under hero/search (same 1200px column as search box) */
@media (min-width: 1025px) {
  body.home-page #search-container.results-section {
    width: min(1200px, calc(100% - 3rem)) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
  }

  body.home-page #search-container .course-list-grid,
  body.home-page #results.course-list-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home-page #search-container .course-list-grid .results-grid,
  body.home-page #results > .results-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
}

/* ── FAQ after footer ──
body.home-page .home-faq--after-footer {
  margin-top: 0 !important;
}

/* ── Static pages: cinematic shell ── */
body.gp-static-page {
  background: #071310 !important;
  color: #f3f4f6 !important;
}

body.gp-static-page .header,
body.gp-static-page .ds-nav {
  background: #091a11 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.gp-static-page .header-container {
  display: flex !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  height: 62px !important;
}

body.gp-static-page .header-container .logo {
  display: flex !important;
  align-items: center !important;
  gap: 0.1rem !important;
  font-weight: 800 !important;
  font-size: 2.46rem !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.gp-static-page .header-container .logo img {
  width: 47px !important;
  height: 47px !important;
}

body.gp-static-page .header-container nav {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

body.gp-static-page .header-container .nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  width: 100% !important;
  max-width: 720px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

body.gp-static-page .header-container .nav-menu > li > a {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 0.45rem 0.65rem !important;
  border-radius: 8px !important;
}

body.gp-static-page .header-container .nav-menu > li > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Active/current page link — elegant golden yellow (obvious but not garish), consistent across the site. */
body.gp-static-page .header-container .nav-menu > li > a.active-link,
body.gp-static-page .header-container .nav-menu > li > a[aria-current="page"] {
  color: var(--gp-nav-active, #f2c14e) !important;
  background: rgba(242, 193, 78, 0.12) !important;
}

body.gp-static-page .gp-static-hero-section {
  background: #071310 !important;
  padding: 0.85rem 1.5rem 0.5rem !important;
}

body.gp-static-page .gp-static-hero-panel {
  max-width: 1200px !important;
  width: calc(100% - 3rem) !important;
  margin: 0 auto !important;
  padding: 2.5rem 2rem 2rem !important;
  min-height: 220px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(74, 222, 128, 0.18) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5) !important;
  background:
    linear-gradient(125deg, rgba(4, 11, 7, 0.42) 0%, rgba(8, 20, 12, 0.26) 50%, rgba(4, 11, 7, 0.18) 100%),
    url("/images/hero_desktop.png") 22% 42% / cover no-repeat !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

body.gp-static-page .gp-static-hero-panel .hero-title {
  margin: 0 !important;
  font-size: clamp(1.85rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.55) !important;
}

body.gp-static-page .gp-static-hero-panel .hero-desc {
  margin: 0.45rem 0 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 1.05rem !important;
}

body.gp-static-page .gp-static-hero-panel .hero-social-row-wrap {
  margin-top: 0.85rem !important;
}

body.gp-static-page .gp-static-hero-panel .hero-social-media {
  display: flex !important;
  justify-content: center !important;
  gap: 0.85rem !important;
  margin-top: 0 !important;
}

body.gp-static-page .content-section,
body.gp-static-page .content-container {
  background: transparent !important;
}

body.gp-static-page .content-section .content-container,
body.gp-static-page .about-content,
body.gp-static-page .news-content,
body.gp-static-page .contact-content,
body.gp-static-page .list-courses-content,
body.gp-static-page .investment-content {
  background: rgba(12, 30, 20, 0.92) !important;
  border: 1px solid rgba(74, 222, 128, 0.15) !important;
  border-radius: 18px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}

body.gp-static-page .content-section h2,
body.gp-static-page .content-section h3 {
  color: #fff !important;
}

body.gp-static-page .content-section p,
body.gp-static-page .content-section li {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.gp-static-page .about-content {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

body.gp-static-page .about-content h2 {
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
}

body.gp-static-page .about-content h2:first-child {
  margin-top: 0 !important;
}

body.gp-static-page .about-content p,
body.gp-static-page .about-content li {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
}

body.gp-static-page .about-content ul {
  margin: 1rem 0 1.5rem !important;
  padding-left: 2rem !important;
}

body.gp-static-page .about-content strong {
  color: #86efac !important;
  font-weight: 600 !important;
}

body.gp-static-page .about-content a {
  color: #4ade80 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.gp-static-page .about-content a:hover {
  color: #86efac !important;
  text-decoration: underline !important;
}

/* News cards — lifted panels above .news-content container (rgba 12,30,20) */
body.gp-static-page .news-content .news-card,
body.gp-static-page .news-content .featured-news {
  background: rgba(24, 56, 40, 0.92) !important;
  border: 1px solid rgba(74, 222, 128, 0.24) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.gp-static-page .news-content .news-card:hover,
body.gp-static-page .news-content .featured-news:hover {
  background: rgba(30, 68, 48, 0.96) !important;
  border-color: rgba(74, 222, 128, 0.34) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38) !important;
}

body.gp-static-page .news-content .featured-news {
  background: rgba(28, 62, 44, 0.94) !important;
}

body.gp-static-page .news-content .news-title {
  color: #fff !important;
}

body.gp-static-page .news-content .news-excerpt,
body.gp-static-page .news-content .news-date {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.gp-static-page .news-content .news-category {
  background: rgba(34, 197, 94, 0.35) !important;
  color: #ecfdf5 !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
}

body.gp-static-page .news-content .featured-news {
  border-left: 4px solid #4ade80 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36) !important;
}

body.gp-static-page .news-content {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

body.gp-static-page .news-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

body.gp-static-page .news-content .news-card {
  padding: 1.15rem 1.2rem !important;
}

body.gp-static-page .news-content .news-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-bottom: 0.7rem !important;
}

body.gp-static-page .news-content .news-title {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.6rem !important;
  line-height: 1.3 !important;
}

body.gp-static-page .news-content .news-date {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

body.gp-static-page .news-content .news-excerpt {
  line-height: 1.6 !important;
  margin: 0 !important;
}

body.gp-static-page .news-content .news-category {
  display: inline-block !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

body.gp-static-page .news-content .featured-news {
  margin-bottom: 1rem !important;
}

body.gp-static-page .news-content .featured-news .news-title {
  margin-top: 0.1rem !important;
}

/* Directory — layout: stay inside viewport with equal side gutters */
body.gp-static-page .directory-marketplace.ds-section {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body.gp-static-page .directory-marketplace .content-container,
body.gp-static-page .directory-marketplace .directory-marketplace-shell,
body.gp-static-page .directory-marketplace .directory-marketplace-main,
body.gp-static-page .directory-marketplace .list-courses-content {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.gp-static-page .directory-marketplace .course-tree,
body.gp-static-page .directory-marketplace .tree-content {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.gp-static-page .directory-marketplace .course-tree {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tighter vertical rhythm between country / state / city rows */
body.gp-static-page .directory-marketplace .tree-node {
  margin: 0.15rem 0 !important;
}

body.gp-static-page .directory-marketplace .tree-content {
  margin-top: 0.1rem !important;
  margin-bottom: 0.1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.gp-static-page .directory-marketplace .country-node .tree-toggle,
body.gp-static-page .directory-marketplace .region-node .tree-toggle,
body.gp-static-page .directory-marketplace .city-node .tree-toggle {
  margin: 0 !important;
  min-height: 0 !important;
}

body.gp-static-page .directory-marketplace .directory-marketplace-main {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.gp-static-page .directory-marketplace .course-tree {
  padding-left: 1rem !important;
  padding-right: 1.25rem !important;
  --dir-country-width: 14rem;
  --dir-state-width: 18rem;
  --dir-city-width: 22rem;
  --dir-panel-width: calc(var(--dir-city-width) + 3.75rem);
  --dir-tree-line: 2px solid rgba(82, 183, 136, 0.4);
  --dir-tree-indent: 0.55rem;
}

/* Tree guide lines + indent (no extra margin stacking) */
body.gp-static-page .directory-marketplace .country-node > .tree-content,
body.gp-static-page .directory-marketplace .region-node > .tree-content,
body.gp-static-page .directory-marketplace .city-node > .tree-content {
  margin-left: 0 !important;
  border-left: var(--dir-tree-line) !important;
  padding-left: var(--dir-tree-indent) !important;
  padding-right: 0 !important;
}

body.gp-static-page .directory-marketplace .city-node > .tree-content {
  margin-top: 0.15rem !important;
  padding-right: 0.75rem !important;
}

/* Result cards: flush to city tree line + small margin */
body.gp-static-page .directory-marketplace .city-node > .tree-content > .results-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: var(--dir-city-width) !important;
  max-width: var(--dir-city-width) !important;
  box-sizing: border-box !important;
}

body.gp-static-page .directory-marketplace .city-node > .tree-content > .results-grid .golf-course-card {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Slim accordion rows — uniform width per level */
body.gp-static-page .directory-marketplace .country-node .tree-toggle,
body.gp-static-page .directory-marketplace .region-node .tree-toggle,
body.gp-static-page .directory-marketplace .city-node .tree-toggle {
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

body.gp-static-page .directory-marketplace .country-node > .tree-toggle {
  width: var(--dir-country-width) !important;
  min-width: var(--dir-country-width) !important;
  max-width: var(--dir-country-width) !important;
  padding: 0.28rem 0.55rem !important;
  font-size: 0.88rem !important;
}

body.gp-static-page .directory-marketplace .region-node > .tree-toggle {
  width: var(--dir-state-width) !important;
  min-width: var(--dir-state-width) !important;
  max-width: var(--dir-state-width) !important;
  padding: 0.26rem 0.5rem !important;
  font-size: 0.8rem !important;
}

body.gp-static-page .directory-marketplace .city-node > .tree-toggle {
  width: var(--dir-city-width) !important;
  min-width: var(--dir-city-width) !important;
  max-width: var(--dir-city-width) !important;
  padding: 0.24rem 0.48rem !important;
  font-size: 0.74rem !important;
}

body.gp-static-page .directory-marketplace .tree-toggle > i {
  flex: 0 0 auto !important;
  width: 0.75rem !important;
  font-size: 0.65rem !important;
  margin: 0 !important;
  color: #ffeb3b !important;
  opacity: 1 !important;
  text-align: center !important;
}

body.gp-static-page .directory-marketplace .tree-toggle .tree-toggle-text {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 0.5rem !important;
  overflow: hidden !important;
}

body.gp-static-page .directory-marketplace .tree-toggle .tree-toggle-label {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.gp-static-page .directory-marketplace .tree-toggle .tree-toggle-count,
body.gp-static-page .directory-marketplace .tree-toggle .tree-toggle-count.count {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  margin: 0 !important;
  padding: 0.08rem 0.3rem !important;
  min-width: 3.4rem !important;
  white-space: nowrap !important;
  font-size: 0.92em !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: inherit !important;
  opacity: 0.95 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  body.gp-static-page .directory-marketplace.ds-section {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  body.gp-static-page .directory-marketplace .course-tree {
    padding: 0.75rem !important;
  }

  body.gp-static-page .directory-marketplace .directory-marketplace-layout,
  body.gp-static-page .directory-marketplace .directory-marketplace-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.gp-static-page .directory-marketplace .country-node > .tree-toggle,
  body.gp-static-page .directory-marketplace .region-node > .tree-toggle,
  body.gp-static-page .directory-marketplace .city-node > .tree-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.gp-static-page .directory-marketplace .city-node > .tree-content {
    padding-right: 0 !important;
  }

  body.gp-static-page .directory-marketplace .city-node > .tree-content > .results-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.gp-static-page .directory-marketplace .tree-node {
    margin: 0.1rem 0 !important;
  }

  body.gp-static-page .directory-marketplace .tree-toggle > i {
    width: 0.65rem !important;
    font-size: 0.58rem !important;
  }

  body.gp-static-page .directory-marketplace .tree-toggle .tree-toggle-text {
    gap: 0.35rem !important;
  }
}

@media (max-width: 420px) {
  body.gp-static-page .directory-marketplace .region-node > .tree-toggle {
    font-size: 0.72rem !important;
    padding: 0.22rem 0.42rem !important;
  }

  body.gp-static-page .directory-marketplace .city-node > .tree-toggle {
    font-size: 0.66rem !important;
    padding: 0.2rem 0.4rem !important;
  }

  body.gp-static-page .directory-marketplace .tree-toggle .tree-toggle-count,
  body.gp-static-page .directory-marketplace .tree-toggle .tree-toggle-count.count {
    min-width: 2.9rem !important;
  }

}

body.gp-static-page .directory-marketplace .course-item {
  background: rgba(15, 35, 24, 0.85) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-left-color: #52b788 !important;
}

@media (max-width: 900px) {
  body.gp-static-page .gp-static-hero-panel {
    width: calc(100% - 2rem) !important;
    padding: 1.2rem 1rem !important;
    background-position: 18% 38% !important;
  }
}

/* Static page heroes — shorter on phone; search/home hero unchanged */
@media (max-width: 767px) {
  body.gp-static-page .gp-static-hero-section {
    padding: 0.65rem 1rem 0.4rem !important;
  }

  body.gp-static-page .gp-static-hero-panel {
    min-height: 0 !important;
    padding: 0.85rem 1rem 0.85rem !important;
  }

  body.gp-static-page .gp-static-hero-panel .hero-title {
    margin-top: 0.15rem !important;
    margin-bottom: 0.15rem !important;
  }

  body.gp-static-page .gp-static-hero-panel .hero-desc {
    margin-top: 0.35rem !important;
    margin-bottom: 0.15rem !important;
  }
}

/* Static page heroes — shorter on desktop; consistent fixed height; search/home unchanged */
@media (min-width: 768px) {
  body.gp-static-page .gp-static-hero-section {
    padding: 0.5rem 1.5rem 0.35rem !important;
  }

  body.gp-static-page .gp-static-hero-panel {
    min-height: 152px !important;
    height: auto !important;
    padding: 0.75rem 2rem 0.85rem !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body.gp-static-page .gp-static-hero-panel .hero-title {
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  body.gp-static-page .gp-static-hero-panel .hero-desc {
    margin: 0.35rem 0 0 !important;
  }

  body.gp-static-page .gp-static-hero-panel .hero-social-row-wrap {
    margin-top: 0.45rem !important;
  }

  body.gp-static-page .gp-static-hero-panel .hero-social-media {
    margin-top: 0 !important;
    gap: 0.65rem !important;
  }
}

/* ── AI chat — homepage cinematic + green prompt pills ── */
body.home-page #aiModal .ai-modal-header,
body.gp-static-page #aiModal .ai-modal-header {
  background: linear-gradient(120deg, #0f2e22 0%, #1a4d38 55%, #23705b 100%) !important;
}

body.home-page #aiModal .ai-suggested-prompts-bottom,
body.gp-static-page #aiModal .ai-suggested-prompts-bottom,
body.home-page #aiModal #aiPromptContainer,
body.gp-static-page #aiModal #aiPromptContainer {
  background: #ffffff !important;
}

body.home-page #aiModal .ai-suggested-prompt-btn,
body.gp-static-page #aiModal .ai-suggested-prompt-btn,
body.home-page #aiModal #aiPromptContainer .ai-suggested-prompt-btn,
body.gp-static-page #aiModal #aiPromptContainer .ai-suggested-prompt-btn {
  background: linear-gradient(120deg, #18483b, #1f6d58) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(20, 71, 58, 0.25) !important;
}

body.home-page #aiModal .ai-suggested-prompt-btn:hover,
body.gp-static-page #aiModal .ai-suggested-prompt-btn:hover,
body.home-page #aiModal #aiPromptContainer .ai-suggested-prompt-btn:hover,
body.gp-static-page #aiModal #aiPromptContainer .ai-suggested-prompt-btn:hover {
  background: linear-gradient(120deg, #143e32, #1a5f4d) !important;
  color: #fff !important;
}

body.home-page #aiModal .ai-suggested-label,
body.gp-static-page #aiModal .ai-suggested-label {
  color: #255647 !important;
}

body.home-page #aiModal .ai-chat-form button,
body.gp-static-page #aiModal .ai-chat-form button {
  background: linear-gradient(120deg, #18483b, #1f6d58) !important;
  color: #ffffff !important;
}

/* Mobile AI dialog — shared gp-ai-dialog-mobile (see style-aimodal-fix.css) */
body.home-page #aiModal.gp-ai-dialog-mobile .modal-content.ai-modal-modern,
body.gp-static-page #aiModal.gp-ai-dialog-mobile .modal-content.ai-modal-modern {
  width: min(92vw, 420px) !important;
  max-width: min(92vw, 420px) !important;
  height: auto !important;
  max-height: calc(100dvh - 2 * max(14px, 5dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 auto !important;
}

body.home-page #aiModal.gp-ai-dialog-mobile .ai-chat-message.user span,
body.home-page #aiModal.gp-ai-dialog-mobile .ai-chat-message.ai span,
body.gp-static-page #aiModal.gp-ai-dialog-mobile .ai-chat-message.user span,
body.gp-static-page #aiModal.gp-ai-dialog-mobile .ai-chat-message.ai span {
  font-size: 0.765rem !important;
}

body.home-page #aiModal.gp-ai-dialog-mobile .ai-chat-message.ai span,
body.gp-static-page #aiModal.gp-ai-dialog-mobile .ai-chat-message.ai span {
  line-height: 1.28 !important;
}

body.home-page #aiModal.gp-ai-dialog-mobile .ai-chat-message,
body.gp-static-page #aiModal.gp-ai-dialog-mobile .ai-chat-message {
  margin-bottom: 0.325rem !important;
}

body.home-page #aiModal.gp-ai-dialog-mobile .ai-suggested-prompts-bottom,
body.gp-static-page #aiModal.gp-ai-dialog-mobile .ai-suggested-prompts-bottom {
  padding-top: 0.21rem !important;
  padding-bottom: 0.14rem !important;
}

body.home-page #aiModal.gp-ai-dialog-mobile .ai-suggested-prompt-btn,
body.gp-static-page #aiModal.gp-ai-dialog-mobile .ai-suggested-prompt-btn {
  padding-top: 0.07rem !important;
  padding-bottom: 0.07rem !important;
  height: 24px !important;
  font-size: 0.61rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Task 6 — Shared Golfapedia header for all static pages.
   Logo + wordmark sizing matches the directory page (canonical reference)
   and is identical across index, directory, about, news, partner, contact.

   This block lives at the END of this file (the LAST stylesheet loaded by
   every static page after gp-brand.css) so it always wins the cascade.

   Desktop (≥769 px):  logo | [centered nav] | language dropdown anchored right
   Mobile  (≤768 px):  logo | [absolutely centered wordmark] | hamburger
   ══════════════════════════════════════════════════════════════════════════ */

/* Canonical reference (directory-page sizing) — applies at every viewport */
body.home-page .header-container .logo,
body.gp-static-page .header-container .logo {
  gap: 0.1rem !important;
  font-weight: 800 !important;
  font-size: 2.46rem !important;
}

body.home-page .header-container .logo img,
body.gp-static-page .header-container .logo img {
  width: 47px !important;
  height: 47px !important;
}

body.home-page .header-container .logo .gp-brand-text,
body.gp-static-page .header-container .logo .gp-brand-text {
  font-size: 2.46rem !important;
}

/* ── Task 8 — Desktop (≥769 px): nav centered between wordmark and
   language dropdown; "Select Language" anchored to the right edge with
   no excess whitespace; body text shifted slightly left & anchored. ── */
@media (min-width: 769px) {
  body.home-page .header-container .gp-translate-widget,
  body.gp-static-page .header-container .gp-translate-widget,
  .header-container > #google_translate_element.gp-translate-widget {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    max-width: 100% !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  body.home-page .header-container .gp-translate-widget select,
  body.gp-static-page .header-container .gp-translate-widget select,
  .header-container > #google_translate_element.gp-translate-widget select,
  body.home-page .header-container .gp-translate-widget .goog-te-combo,
  body.gp-static-page .header-container .gp-translate-widget .goog-te-combo,
  .header-container > #google_translate_element.gp-translate-widget .goog-te-combo {
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding-right: 1.5rem !important;
  }

  /* Body text anchored slightly to the left.  Each static page exposes a
     hero panel + a content container — both are left-aligned here. */
  body.gp-static-page .content-section .content-container,
  body.gp-static-page .about-content,
  body.gp-static-page .news-content,
  body.gp-static-page .contact-content,
  body.gp-static-page .list-courses-content,
  body.gp-static-page .investment-content,
  body.home-page .hero-cin-left,
  body.home-page .hero-cin-headline {
    text-align: left !important;
  }
}

/* ── Task 6 — Mobile (≤768 px): shared layout across every static page.
   Logo image on the left, hamburger on the right (justify-content:
   space-between), Golfapedia wordmark perfectly centered horizontally
   AND vertically using absolute positioning relative to the header
   container.  Wordmark sized ~25 % larger than the prior mobile size
   with a clamp so it never overlaps the logo (47 px) on the left or
   the hamburger (~30 px) on the right, even on a 360 px Galaxy Fold. ── */
@media (max-width: 768px) {
  body.home-page .header-container,
  body.gp-static-page .header-container {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 0.75rem !important;
    min-height: 60px !important;
    height: 60px !important;
  }

  body.home-page .header-container .logo,
  body.gp-static-page .header-container .logo {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    position: static !important;
  }

  body.home-page .header-container .logo img,
  body.gp-static-page .header-container .logo img {
    width: 47px !important;
    height: 47px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Wordmark — absolutely centered, ~25 % larger than the prior mobile
     size, clamped so it can never overlap logo or hamburger.  The
     130 px safety reservation = 47 px logo + 30 px hamburger + ~26 px
     of breathing room on each side. */
  body.home-page .header-container .logo .gp-brand-text,
  body.gp-static-page .header-container .logo .gp-brand-text {
    position: absolute !important;
    left: 44% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(1.4rem, 5.5vw, 2.025rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    max-width: calc(100% - 130px) !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body.home-page .header-container nav,
  body.gp-static-page .header-container nav {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }

  body.home-page .header-container .hamburger,
  body.gp-static-page .header-container .hamburger {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    order: 10 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SINGLE SOURCE OF TRUTH — identical desktop header on EVERY page.

   The home page (body.home-page) was the lone outlier: index-cinematic.css
   loads after this file and gave it a larger nav font (1.25rem) + a different
   logo gap, so its header no longer matched the static pages. These rules use
   the extra `.ds-page` class to raise specificity above index-cinematic.css,
   so the home-page header is forced to render byte-for-byte identical to the
   directory / about / news / contact / partner headers — same logo size,
   wordmark, nav font family, font size, weight, spacing and hover state.

   Scoped to desktop (≥769px); the mobile header above is already unified.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body.ds-page.home-page .header-container,
  body.ds-page.gp-static-page .header-container {
    display: flex !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    height: 62px !important;
    gap: 0 !important;
  }

  body.ds-page.home-page .header-container .logo,
  body.ds-page.gp-static-page .header-container .logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.1rem !important;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.46rem !important;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }

  body.ds-page.home-page .header-container .logo img,
  body.ds-page.gp-static-page .header-container .logo img {
    width: 47px !important;
    height: 47px !important;
  }

  body.ds-page.home-page .header-container .logo .gp-brand-text,
  body.ds-page.gp-static-page .header-container .logo .gp-brand-text {
    font-size: 2.46rem !important;
    font-weight: 800 !important;
  }

  body.ds-page.home-page .header-container nav,
  body.ds-page.gp-static-page .header-container nav {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  body.ds-page.home-page .header-container .nav-menu,
  body.ds-page.gp-static-page .header-container .nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 720px !important;
  }

  body.ds-page.home-page .header-container .nav-menu > li > a,
  body.ds-page.home-page .header-container .nav-menu > li > a:visited,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a:visited {
    display: block !important;
    padding: 0.45rem 0.65rem !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
  }

  body.ds-page.home-page .header-container .nav-menu > li > a:hover,
  body.ds-page.home-page .header-container .nav-menu > li > a:focus,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a:hover,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.09) !important;
  }

  /* Active/current page — golden yellow. Raised to .ds-page specificity so it
     wins over the unified white hover state above. */
  body.ds-page.home-page .header-container .nav-menu > li > a.active-link,
  body.ds-page.home-page .header-container .nav-menu > li > a[aria-current="page"],
  body.ds-page.gp-static-page .header-container .nav-menu > li > a.active-link,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a[aria-current="page"] {
    color: var(--gp-nav-active, #f2c14e) !important;
    background: rgba(242, 193, 78, 0.12) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   #20 — Mobile hamburger navigation dropdown.

   Legacy style.css set a blue (#1e3c72) absolute dropdown with `left:16px`,
   which fought theme.css's right-side `right:0; width:280px` slide-in panel
   and produced an off-looking, oddly positioned menu. These rules unify it:
   one consistent dark-green Golfapedia panel, compact even spacing between
   links, a clean tappable close (the hamburger morphs into an X top-right),
   and the golden-yellow active/current page state. Scoped to cellphone width
   and raised to .ds-page specificity so it wins over the base nav rules in
   gp-site-shared/index-cinematic without !important wars.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.ds-page.home-page .header-container .nav-menu,
  body.ds-page.gp-static-page .header-container .nav-menu {
    left: auto !important;            /* cancel legacy left:16px so right:0 wins */
    top: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    background: var(--gp-nav-bg, #1b4332) !important;
    background-color: var(--gp-nav-bg, #1b4332) !important;
    padding: 3.25rem 0.85rem 1rem !important;
    gap: 0 !important;
    box-shadow: -6px 0 26px rgba(0, 0, 0, 0.28) !important;
  }

  body.ds-page.home-page .header-container .nav-menu > li,
  body.ds-page.gp-static-page .header-container .nav-menu > li {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body.ds-page.home-page .header-container .nav-menu > li > a,
  body.ds-page.home-page .header-container .nav-menu > li > a:visited,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a:visited {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Compact, even vertical rhythm between links. */
    padding: 0.62rem 0.7rem !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 8px !important;
  }

  body.ds-page.home-page .header-container .nav-menu > li > a:hover,
  body.ds-page.home-page .header-container .nav-menu > li > a:focus,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a:hover,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  /* Active/current page — golden yellow here too. */
  body.ds-page.home-page .header-container .nav-menu > li > a.active-link,
  body.ds-page.home-page .header-container .nav-menu > li > a[aria-current="page"],
  body.ds-page.gp-static-page .header-container .nav-menu > li > a.active-link,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a[aria-current="page"] {
    color: var(--gp-nav-active, #f2c14e) !important;
    background: rgba(242, 193, 78, 0.14) !important;
  }

  /* Close affordance: hamburger above panel — no border box on cellphone */
  body.ds-page.home-page .header-container .hamburger,
  body.ds-page.gp-static-page .header-container .hamburger {
    position: relative !important;
    z-index: 2100 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  body.ds-page.home-page .header-container .hamburger[aria-expanded="true"],
  body.ds-page.gp-static-page .header-container .hamburger[aria-expanded="true"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Language picker row inside the menu — keep it visually consistent (no stray
     bright-blue default gadget chrome bleeding through the dark panel). */
  body.ds-page.home-page .header-container .nav-menu .gp-translate-mobile,
  body.ds-page.gp-static-page .header-container .nav-menu .gp-translate-mobile {
    border-bottom: none !important;
    padding: 0.62rem 0.7rem !important;
    margin-top: 0.25rem !important;
  }
}

/* Official club website — clear hyperlink styling (cards + map info windows) */
.golf-course-card .course-card-website,
.golf-course-card .course-card-website-link,
.golfapedia-map-card .course-card-website,
.golfapedia-map-card .course-card-website-link,
html body .directory-marketplace .golf-course-card .course-card-website,
html body .directory-marketplace .golf-course-card .course-card-website-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.04rem 0.5rem 0.4rem;
  box-sizing: border-box;
}

.golf-course-card a.gp-club-website-link,
.golfapedia-map-card a.gp-club-website-link,
html body .directory-marketplace .golf-course-card a.gp-club-website-link {
  display: inline-block;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1.25;
  color: #0b63ce !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.2px !important;
  text-underline-offset: 2px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  flex: none !important;
  cursor: pointer;
}

.golf-course-card a.gp-club-website-link::after,
.golfapedia-map-card a.gp-club-website-link::after {
  content: " \2197";
  font-size: 0.82em;
  opacity: 0.85;
}

.golf-course-card a.gp-club-website-link:hover,
.golf-course-card a.gp-club-website-link:focus-visible,
.golfapedia-map-card a.gp-club-website-link:hover,
.golfapedia-map-card a.gp-club-website-link:focus-visible,
html body .directory-marketplace .golf-course-card a.gp-club-website-link:hover,
html body .directory-marketplace .golf-course-card a.gp-club-website-link:focus-visible {
  color: #084fa8 !important;
  text-decoration: underline !important;
}

/* "Embed On Your Site" call to action (replaces the old club-website link on cards) */
.golf-course-card a.course-card-embed-link,
.golfapedia-map-card a.course-card-embed-link,
html body .directory-marketplace .golf-course-card a.course-card-embed-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #0f1c2b !important;
  background: #b9892f !important;
  text-decoration: none !important;
  padding: 0.36rem 0.8rem !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.golf-course-card a.course-card-embed-link::before,
.golfapedia-map-card a.course-card-embed-link::before {
  content: "</>";
  font-weight: 800;
  opacity: 0.9;
}

.golf-course-card a.course-card-embed-link:hover,
.golf-course-card a.course-card-embed-link:focus-visible,
.golfapedia-map-card a.course-card-embed-link:hover,
.golfapedia-map-card a.course-card-embed-link:focus-visible,
html body .directory-marketplace .golf-course-card a.course-card-embed-link:hover,
html body .directory-marketplace .golf-course-card a.course-card-embed-link:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #0f1c2b !important;
}

/* ---------------------------------------------------------------------------
   Embed-feature gate (private beta)
   The public embed call-to-actions stay hidden for the general public until the
   feature is official. <html> carries gp-embed-off by default; an inline gate
   script in index.html / directory.html swaps it to gp-embed-on only when the
   URL opts in (an "embed" or "beta" path segment / query flag, e.g. /embed,
   /directory?embed). This hides both the per-card "Embed On Your Site" buttons
   (cards + map info windows) and the middle-of-page golf-travel embed demo strip.
--------------------------------------------------------------------------- */
html.gp-embed-off .course-card-website,
html.gp-embed-off .gp-travel-demo-strip {
  display: none !important;
}