/*
 * 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;
}

/* ── 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;
  background: rgba(0, 0, 0, 0.32);
  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;
  margin: 1.75rem auto 0.5rem;
  padding: 0 1rem 1.25rem;
  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;
  }
}

/* ── 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,
body.gp-static-page .header-container .nav-menu > li > a.active-link {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.09) !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.home-page .header-container .nav-menu > li > a.active-link,
  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,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a.active-link {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.09) !important;
  }
}