/* Golf page theme: values come from tokens.css and app.css (homepage). */
  body.golf-page {
    max-width: none; margin: 0; padding: 0;
    background: var(--ref-cream); color: var(--ink);
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 17px; line-height: 1.65;
  }
  body.golf-page .golf-main { max-width: 1360px; margin: 0 auto; padding: 26px 24px 72px; }
  /* app.js's initBlock11 appends a .card-links row (directions / menu /
     booking / phone links plus its own Trip/Favorite buttons) to every
     .venue-card it finds. Golf cards deliberately show only Favorite and
     Add to Trip (rendered server-side above), so that injected row is
     suppressed here; the homepage module still drives the server-rendered
     buttons because they share the .trip-btn/.fav-btn contract. */
  body.golf-page .venue-card .card-links { display: none; }
  body.golf-page a { color: var(--ref-navy); }
  body.golf-page a:hover { color: var(--ref-gold); }
  /* Footer links (2026-09-20 fix): the rule above outranks the footer's own
     .home-footer-col a colour, which painted its links navy-on-navy on
     every golf-themed page. Restates the footer's own values; no markup
     or layout change. */
  body.golf-page .home-footer-col a, body.golf-page .home-footer-region-group a { color: rgba(245,243,237,0.78); }
  body.golf-page .home-footer-col a:hover, body.golf-page .home-footer-region-group a:hover { color: var(--ref-gold); }
  body.golf-page a.app-btn, body.golf-page a.app-btn:hover { color: var(--ref-white); text-decoration: none; }
  /* Contrast (2026-10-20, round 11): the rule above painted the event page's plum "Tickets & info" button navy on plum
     (1.42:1) and its hover gold. A .cta link keeps its own colours: paper on plum, plum on paper for .secondary.
     :where() keeps these at the weight of "body.golf-page a", so the venue CTA row's own navy rules still win. */
  body.golf-page a.cta, body.golf-page a.cta:where(:hover, :focus-visible) { color: var(--paper); }
  body.golf-page a.cta:where(.secondary), body.golf-page a.cta:where(.secondary:hover, .secondary:focus-visible) { color: var(--plum); }
  body.golf-page nav.breadcrumb { font-size: 0.8rem; color: rgba(42,32,25,0.76); margin-bottom: 18px; }
  /* Tap targets (2026-10-20, round 11): breadcrumb links are 44px tall to a finger on every themed page, not only
     venue pages; negative margins keep the line where it was. */
  body.golf-page nav.breadcrumb a { display: inline-block; padding: 13px 5px; margin: -13px -5px; }
  body.golf-page nav.breadcrumb a { color: var(--ref-navy); }
  body.golf-page .category-back-link, body.golf-page .venue-back-link {
    display: inline-block; font-weight: 700; font-size: 0.86rem; color: var(--ref-navy);
    text-decoration: none; margin-bottom: 14px;
  }
  body.golf-page .category-back-link:hover, body.golf-page .venue-back-link:hover { color: var(--ref-gold-ink, #8A6A0F); }
  body.golf-page h1 {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; line-height: 1.15;
    font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 6px; color: var(--ink);
  }
  body.golf-page .subtitle { font-size: 0.95rem; color: var(--ink-muted, #6B5D54); margin: 0 0 22px; }

  /* Region selector: homepage redesign pills -- resting/hover from
     .lang-toggle, active from .region-chip[aria-pressed="true"] (app.css). */
  body.golf-page .category-region-selector { margin: 0 0 22px; }
  body.golf-page .category-region-selector a,
  body.golf-page .category-region-selector-active {
    background: transparent; color: var(--ref-navy); border: 1px solid rgba(27,43,58,0.2);
    border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 0.8rem; text-decoration: none;
    transition: all .15s ease;
  }
  body.golf-page .category-region-selector a:hover { background: rgba(27,43,58,0.06); color: var(--ref-navy); }
  body.golf-page .category-region-selector-active { background: var(--ref-navy); color: var(--paper); border-color: var(--ref-navy); }

  /* Section headings: the homepage's .discover-heading h2 + eyebrow bar. */
  body.golf-page .category-subsection-heading {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    color: var(--ink); margin: 26px 0 12px; padding: 0; border: 0;
  }
  body.golf-page .category-subsection-heading::before {
    content: ""; display: block; width: 20px; height: 2px; background: var(--teal); margin-bottom: 8px;
  }
  body.golf-page .category-subsection-heading:first-of-type { margin-top: 6px; }

  /* Listing cards: the homepage card system (paper, 14px radius, soft
     shadow, hover lift), two-up on wide screens like the discovery rows. */
  body.golf-page .card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 26px; }
  @media (min-width: 900px) { body.golf-page .card-grid { grid-template-columns: repeat(2, 1fr); } }
  /* Uniform listing cards (2026-10-12): every card in a row is the same
     height and built the same way, top to bottom -- name (max 2 lines),
     one-line meta, description (3 lines, Read more always reserves its line),
     notices and notes (max 3 lines), then the badge row and buttons pinned to
     the bottom, so the chips and buttons line up across the row. The badge
     row itself is capped server-side (venueCardHtml maxChips). */
  body.golf-page .card-grid { align-items: stretch; }
  body.golf-page .card-grid > .venue-card h2 a.venue-card-link .venue-card-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.golf-page .card-grid > .venue-card > .venue-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.golf-page .card-grid > .venue-card .golf-desc { min-height: calc(3 * 1.45em); }
  body.golf-page .card-grid > .venue-card .golf-desc.is-clamped p { -webkit-line-clamp: 3; max-height: calc(3 * 1.45em); }
  body.golf-page .card-grid > .venue-card .desc-toggle[hidden] { display: block; visibility: hidden; }
  body.golf-page .card-grid > .venue-card .card-note,
  body.golf-page .card-grid > .venue-card .dog-note {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.golf-page .card-grid > .venue-card > .chips:not(:empty) { margin-top: auto; }
  body.golf-page .card-grid > .venue-card > .chips:empty { display: none; }
  body.golf-page .card-grid > .venue-card > .chips:not(:empty) + .card-actions { margin-top: 8px; }
  body.golf-page .card-grid > .venue-card > .chips:empty + .card-actions { margin-top: auto; }
  body.golf-page .card-slot:empty { display: none; }
  body.golf-page .card-slot-desc { display: flex; flex-direction: column; }
  /* Two-up rows (2026-10-12): each card spans ten rows of the list's grid
     and shares them (subgrid), so the name, description, notice, note, badge
     and button rows line up across the row; an empty slot becomes a blank
     row only when its neighbour fills that row. */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 900px) {
      body.golf-page .card-grid { row-gap: 0; }
      /* content-visibility: auto (the long-list paint saver) implies layout
         containment, which switches subgrid off, so two-up cards opt out. */
      body.golf-page .card-grid > .venue-card { display: grid; grid-template-rows: subgrid; grid-row: span 10; row-gap: 0; margin-bottom: 16px; align-content: start; content-visibility: visible; contain-intrinsic-size: none; }
      /* Every card part has its own row (2026-10-12): Food & Drink and browse
         cards add an open-now line under the meta, which pushed the badges and
         buttons into one shared row when the rows were auto-placed. A card
         without a part leaves that row empty, so rows still line up. */
      body.golf-page .card-grid > .venue-card > h2 { grid-row: 1; }
      body.golf-page .card-grid > .venue-card > .venue-meta { grid-row: 2; }
      body.golf-page .card-grid > .venue-card > .card-slot-fee { grid-row: 4; }
      body.golf-page .card-grid > .venue-card > .card-slot-desc { grid-row: 5; }
      body.golf-page .card-grid > .venue-card > .card-slot-notice { grid-row: 6; }
      body.golf-page .card-grid > .venue-card > .card-slot-notes { grid-row: 7; }
      body.golf-page .card-grid > .venue-card > .chips { grid-row: 8; }
      body.golf-page .card-grid > .venue-card > .card-actions { grid-row: 9; }
      body.golf-page .card-grid > .venue-card > .card-links { grid-row: 10; }
      body.golf-page .card-grid > .venue-card > .card-slot:empty { display: block; }
      body.golf-page .card-grid > .venue-card > .chips:empty { display: block; margin: 0; padding: 0; border: 0; }
      /* One spacing for every card type, so the badge and button rows match. */
      body.golf-page .card-grid > .venue-card > .chips:not(:empty) { margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; align-self: start !important; }
      body.golf-page .card-grid > .venue-card > .card-actions { margin: 10px 0 0 !important; padding: 10px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(74,52,40,0.10) !important; align-self: end !important; }
    }
  }
  body.golf-page .venue-card {
    margin: 0; background: var(--paper); border: 1px solid rgba(74,52,40,0.08); border-radius: 14px;
    padding: 18px 20px; box-shadow: 0 10px 22px -16px rgba(74,52,40,0.35);
    transition: transform .15s ease, box-shadow .15s ease; display: flex; flex-direction: column;
  }
  body.golf-page .venue-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -16px rgba(74,52,40,0.4); }
  body.golf-page .venue-card h2 { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.12rem; margin: 0 0 5px; line-height: 1.25; }
  /* Venue name = the one link to the detail page. Rendered navy (the
     redesign's link colour, as the header nav / .discover-heading-link),
     underlined on hover/focus, with a small "View details" cue inside the
     same anchor styled like .discover-heading-link (navy, gold on hover).
     display:block + padding makes the whole name+cue a comfortable tap
     target on mobile; the focus ring is app.css's global teal rule. */
  body.golf-page .venue-card h2 a.venue-card-link {
    display: block; padding: 2px 0 4px; color: var(--ref-navy); text-decoration: none; border-radius: 4px;
  }
  body.golf-page .venue-card h2 a.venue-card-link .venue-card-name {
    display: inline; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 2px;
  }
  body.golf-page .venue-card h2 a.venue-card-link:hover .venue-card-name,
  body.golf-page .venue-card h2 a.venue-card-link:focus-visible .venue-card-name { text-decoration: underline; }
  body.golf-page .venue-card h2 a.venue-card-link:hover { color: var(--ref-navy-deep); }
  body.golf-page .venue-card h2 a.venue-card-link .venue-card-cue {
    display: block; margin-top: 3px;
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 700; font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.01em;
    color: var(--ref-navy); white-space: nowrap;
  }
  body.golf-page .venue-card h2 a.venue-card-link:hover .venue-card-cue { color: var(--ref-gold-ink, #8A6A0F); }
  body.golf-page .venue-card h2 a.venue-card-link:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  body.golf-page .venue-card p { font-size: 0.92rem; color: rgba(42,32,25,0.75); line-height: 1.45; opacity: 1; }
  body.golf-page .venue-meta { font-size: 0.85rem; color: rgba(42,32,25,0.68); opacity: 1; }
  body.golf-page .golf-desc.is-clamped p { max-height: calc(4 * 1.45em); }
  body.golf-page .desc-toggle { color: var(--ref-navy); font-size: 0.86rem; align-self: flex-start; }
  body.golf-page .desc-toggle:hover { color: var(--ref-gold-ink, #8A6A0F); text-decoration: none; }
  body.golf-page .venue-card[data-venue-category="golf"] .chips:not(:empty),
  body.golf-page .venue-card[data-venue-category="golf"] .card-actions { border-top-color: rgba(27,43,58,0.1); }
  body.golf-page .venue-card[data-venue-category="golf"] .card-actions { margin-top: auto; padding-top: 12px; }
  /* Batch 3: with badge chips the row is still bottom-anchored (see "Listing
     cards on every themed page" below); the 8px gap under the chips that the
     row's top margin used to give becomes top padding, so the tallest card in
     a grid row keeps it. Re-keyed to Beach / Outdoor / What's On like the
     rules around it. */
  body.golf-page .venue-card[data-venue-category="golf"] > .chips:not(:empty) + .card-actions { margin-top: auto; padding-top: 8px; }
  /* Favorite / Add to Trip pills use the homepage REDESIGN button rules
     (app.css), not the pre-redesign wizard .fav-btn/.trip-btn tan pill:
       resting  = .lang-toggle        (transparent, 1px rgba(27,43,58,0.2), --ref-navy text)
       hover    = .lang-toggle:hover  (rgba(27,43,58,0.06))
       favorited= .region-chip[aria-pressed="true"] (--ref-navy on --paper)
       in trip  = .trip-btn.in-trip   (--teal on --paper)
       focus    = global a/button:focus-visible (3px --teal)
     Specificity is deliberately higher than app.css's .fav-btn/.trip-btn
     and the golf rules in SEO_PAGE_CSS. */
  body.golf-page .venue-card[data-venue-category="golf"] .card-action,
  body.golf-page .venue-cta-row .card-action {
    background: transparent; color: var(--ref-navy); border: 1px solid rgba(27,43,58,0.2);
  }
  /* Tap targets (2026-10-19, round 7): the venue page's Favorite and Add to trip buttons are at least 44px tall. */
  body.golf-page .venue-cta-row .card-action { min-height: 44px; box-sizing: border-box; }
  body.golf-page .venue-card[data-venue-category="golf"] .card-action:hover,
  body.golf-page .venue-cta-row .card-action:hover { background: rgba(27,43,58,0.06); color: var(--ref-navy); }
  body.golf-page .venue-card[data-venue-category="golf"] .fav-btn.is-fav,
  body.golf-page .venue-cta-row .fav-btn.is-fav { background: var(--ref-navy); color: var(--paper); border-color: var(--ref-navy); }
  body.golf-page .venue-card[data-venue-category="golf"] .fav-btn.is-fav:hover,
  body.golf-page .venue-cta-row .fav-btn.is-fav:hover { background: var(--ref-navy-deep); color: var(--paper); }
  body.golf-page .venue-card[data-venue-category="golf"] .trip-btn.in-trip,
  body.golf-page .venue-cta-row .trip-btn.in-trip { background: var(--teal); color: var(--paper); border-color: var(--teal); }
  body.golf-page .venue-card[data-venue-category="golf"] .trip-btn.in-trip:hover,
  body.golf-page .venue-cta-row .trip-btn.in-trip:hover { background: var(--teal-deep); color: var(--paper); }
  body.golf-page .venue-card[data-venue-category="golf"] .card-action:focus-visible,
  body.golf-page .venue-cta-row .card-action:focus-visible,
  body.golf-page .desc-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

  /* Listing cards on every themed page (Batch 3, 2026-09-26). Not keyed on a
     venue category, so the Beach / Outdoor / What's On re-keying above does
     not copy them.
     1. The Favorite / Add to Trip row sits at the bottom of the card, so the
        rows line up across a grid row whatever the description length. The
        second selector (0,5,1) outranks the category rules that reset the
        top margin to 8px when the card has badge chips (0,5,0).
     2. Every themed listing uses the Golf pill above (same values), not the
        pre-redesign tan .fav-btn/.trip-btn pill from app.css.
     3. On phones those two buttons and "Read more" are 44px tap targets. */
  body.golf-page .venue-card > .card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; }
  body.golf-page .venue-card > .chips:not(:empty) + .card-actions { margin-top: auto; }
  body.golf-page .venue-card .card-actions .card-action {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    font-size: 0.82rem; font-weight: 700; font-family: 'Nunito', 'Nunito Fallback', sans-serif; line-height: 1.4;
    background: transparent; color: var(--ref-navy); border: 1px solid rgba(27,43,58,0.2); text-decoration: none;
    border-radius: 999px; padding: 5px 12px; cursor: pointer; width: fit-content;
    transition: background 0.15s;
  }
  body.golf-page .venue-card .card-actions .card-action:hover { background: rgba(27,43,58,0.06); color: var(--ref-navy); }
  body.golf-page .venue-card .card-actions .fav-btn.is-fav { background: var(--ref-navy); color: var(--paper); border-color: var(--ref-navy); }
  body.golf-page .venue-card .card-actions .fav-btn.is-fav:hover { background: var(--ref-navy-deep); color: var(--paper); }
  body.golf-page .venue-card .card-actions .trip-btn.in-trip { background: var(--teal); color: var(--paper); border-color: var(--teal); }
  body.golf-page .venue-card .card-actions .trip-btn.in-trip:hover { background: var(--teal-deep); color: var(--paper); }
  body.golf-page .venue-card .card-actions .card-action:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  @media (max-width: 560px) {
    body.golf-page .venue-card .card-actions .card-action,
    body.golf-page .venue-card .desc-toggle { min-height: 44px; }
  }

  /* Venue page: CTAs use the homepage button system (.app-btn navy pill,
     outline secondary), with Favorite / Add to Trip alongside. */
  body.golf-page .venue-hero { border-radius: 14px; }
  body.golf-page .venue-header { margin-bottom: 16px; }
  body.golf-page .venue-description { font-size: 1rem; line-height: 1.65; color: var(--ink); max-width: 80ch; }
  body.golf-page .venue-cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 26px; }
  body.golf-page .venue-cta-row .cta {
    margin: 0; display: inline-flex; align-items: center; gap: 6px;
    background: var(--ref-navy); color: var(--ref-white); border: 1px solid var(--ref-navy);
    padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.01em;
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; text-decoration: none; transition: background .15s ease;
  }
  body.golf-page .venue-cta-row .cta:hover { background: var(--ref-navy-deep); color: var(--ref-white); }
  body.golf-page .venue-cta-row .cta.secondary { background: transparent; color: var(--ref-navy); border: 1px solid rgba(27,43,58,0.2); }
  body.golf-page .venue-cta-row .cta.secondary:hover { background: rgba(27,43,58,0.06); color: var(--ref-navy); }
  body.golf-page .venue-cta-row .card-action {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    font-size: 0.86rem; font-weight: 700; font-family: 'Nunito', 'Nunito Fallback', sans-serif; line-height: 1.4;
    text-decoration: none; border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: background 0.15s;
  }
  body.golf-page .trip-notice { margin: 8px 0 0; font-size: 0.85rem; color: var(--ref-navy); }
  body.golf-page .trip-notice:empty { display: none; }
  body.golf-page .venue-section, body.golf-page .related-card {
    background: var(--paper); border: 1px solid rgba(74,52,40,0.08); border-radius: 14px;
    box-shadow: 0 10px 22px -16px rgba(74,52,40,0.35);
  }
  body.golf-page .venue-section { padding: 18px 20px; margin-bottom: 18px; }
  body.golf-page .venue-section h2, body.golf-page .related-section h2 {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin: 0 0 10px; color: var(--ink);
  }
  body.golf-page .related-card a:hover { color: var(--ref-navy); }
  body.golf-page .golf-main > a.cta {
    display: inline-flex; align-items: center; margin: 10px 10px 0 0;
    background: transparent; color: var(--ref-navy); border: 1px solid rgba(27,43,58,0.2);
    padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 0.86rem; text-decoration: none;
  }
  body.golf-page .golf-main > a.cta:hover { background: rgba(27,43,58,0.06); color: var(--ref-navy); }
  @media (max-width: 640px) {
    body.golf-page .golf-main { padding: 20px 16px 56px; }
    body.golf-page .venue-cta-row .cta, body.golf-page .venue-cta-row .card-action { width: 100%; justify-content: center; }
  }