/* Fixes layered on top of the Webflow export.
 *
 * Kept in a separate file, loaded after fccthai.webflow.css, so the export
 * stays byte-identical to what Webflow produced and every deviation from it is
 * visible in one place.
 */

/* ── mobile horizontal scroll on bulletin pages ──────────────────────────
 * Present on the live Webflow site too, so this is a fix rather than a
 * regression: /bulletins/* scrolled sideways on a phone, with body text
 * running off both edges.
 *
 * Two independent causes:
 *
 * 1. `grid-template-columns: 1fr` is shorthand for `minmax(auto, 1fr)`, and
 *    that `auto` minimum is the item's min-content width. The table-of-contents
 *    entries pushed the single mobile column to 565px inside a 351px
 *    container. minmax(0, 1fr) lets the track shrink properly.
 *
 * 2. Long unbroken URLs pasted into bulletin copy (Zoom registration links,
 *    UN careers links) cannot wrap and pushed the page wider on their own.
 */
@media screen and (max-width: 991px) {
  .content27_component {
    grid-template-columns: minmax(0, 1fr);
  }

  .content27_sidebar {
    min-width: 0;
  }
}

/* Applies at every width: a long URL overflows a desktop column too, it is
 * just less obvious. `anywhere` rather than `break-word` so the break is
 * allowed mid-token when there is no other option. */
.w-richtext,
.text-rich-text {
  overflow-wrap: anywhere;
}

/* ── membership plans: cards on mobile ──────────────────────────────────
 * The four-column comparison table needs 437px minimum and cannot reflow, so
 * on a phone it either scrolled sideways — hiding the fee columns behind a
 * gesture people miss — or pushed the page. Below 768px each row becomes a
 * card instead: plan name as the heading, the rest as label/value pairs.
 *
 * Labels come from the header row via data-label, set by
 * js/responsive-table.js, so the copy is not duplicated in markup.
 *
 * display:block on table elements drops table layout without touching the
 * markup, so the semantics stay intact for screen readers and desktop is
 * untouched.
 */
@media screen and (max-width: 767px) {
  .fs-table_instance {
    overflow: visible;
  }

  .fs-table_table,
  .fs-table_body,
  .fs-table_row,
  .fs-table_cell {
    display: block;
    width: auto;
    border: 0;
  }

  /* The header row's labels now live on each cell. */
  .fs-table_row[data-table-head] {
    display: none;
  }

  .fs-table_row {
    border: 1px solid var(--color-scheme-1--border, #ddd);
    border-radius: var(--_ui-styles---radius--small, 4px);
    background: var(--color-scheme-1--background, #fff);
    padding: 0.25rem 0 0.5rem;
    margin-bottom: 0.75rem;
  }

  .fs-table_cell[data-card-title] {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--color-scheme-1--border, #ddd);
    margin-bottom: 0.25rem;
  }

  /* Label left, value right — scannable down the column of cards. */
  .fs-table_cell[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 1rem;
  }

  .fs-table_cell[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    opacity: 0.65;
    font-size: 0.875rem;
  }

  .fs-table_cell[data-label] {
    text-align: right;
  }
}

/* ── reciprocal clubs: region filter ────────────────────────────────────
 * Six region tabs measured 582px in a nowrap row and pushed the page sideways.
 * Below 768px they are replaced by a native select (built by
 * js/tabs-select.js): one line, the OS picker, and no way to overflow.
 *
 * Between 768 and 991px there is room to wrap them onto two lines, which
 * keeps every option visible without a picker.
 */
.tab-select {
  display: none;
}

@media screen and (max-width: 767px) {
  .tab-select {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto 1.5rem;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: inherit;
    background-color: var(--color-scheme-1--background, #fff);
    border: 1px solid var(--color-scheme-1--border, #ddd);
    border-radius: var(--_ui-styles---radius--small, 4px);
    /* Native arrow is inconsistent across platforms; supply one and keep the
       right padding above clear for it. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
  }

  .category-filter-menu {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .category-filter-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ══ navigation ═════════════════════════════════════════════════════════
 *
 * Webflow animated the dropdowns through its interaction engine (IX2), which
 * runs in JavaScript on requestAnimationFrame. Measured opening one: worst
 * frame gap 46ms against a 16ms budget — visibly jerky.
 *
 * The data-w-id bindings are removed from _nav.html so IX2 no longer touches
 * these elements, and the animation is done here instead. opacity and
 * transform are compositor properties: they do not trigger layout or paint,
 * so the browser can run them off the main thread.
 *
 * Webflow's own JS still handles the open/close *logic* (the w--open class,
 * hover intent, click-outside, escape) — only the animation moves.
 */

/* Desktop: the panel is absolutely positioned, so keeping it displayed and
 * hiding it with visibility/opacity costs no layout. w--open flips
 * display:none -> block, which cannot be transitioned; this can.
 *
 * Scoped to desktop deliberately. On mobile these panels are position:static
 * and sit in the flow, so display:block leaves them occupying full height
 * while invisible — which added 477px of dead space between menu items. */
@media screen and (min-width: 992px) {
  .navbar12_dropdown-list,
  .navbar12_dropdown-list-2 {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition:
      opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 0.18s;
    pointer-events: none;
  }

  .navbar12_dropdown-list.w--open,
  .navbar12_dropdown-list-2.w--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 0s;
    pointer-events: auto;
  }

  /* IX2 left inline transforms behind before it was unbound. */
  .navbar12_dropdown-list[style*="translate3d"],
  .navbar12_dropdown-list-2[style*="translate3d"] {
    transform: translateY(-0.5rem) !important;
  }
  .navbar12_dropdown-list.w--open[style*="translate3d"],
  .navbar12_dropdown-list-2.w--open[style*="translate3d"] {
    transform: translateY(0) !important;
  }

  /* Lift the panel off the hero image behind it. */
  .navbar12_dropdown-list.w--open,
  .navbar12_dropdown-list-2.w--open {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
  }
}

/* Mobile: an accordion inside the flow. grid-template-rows 0fr -> 1fr is the
 * one way to animate a collapse to genuinely zero height — max-height needs a
 * magic number that clips long panels or leaves a gap on short ones. */
@media screen and (max-width: 991px) {
  /* Paired with .w-dropdown-list to reach specificity (0,2,0). Webflow's
     `.w-dropdown-list.w--open { display: block }` matches too, and a
     single-class rule loses to it — which flipped the panel back to display
     block on close, leaving grid-template-rows inert and the panel stuck open
     at full height. */
  .navbar12_dropdown-list.w-dropdown-list,
  .navbar12_dropdown-list-2.w-dropdown-list {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.2s ease,
      visibility 0s linear 0.26s;
  }

  /* Both required for the collapse: the row can only reach 0 if the child
     stops asserting its own height and clips its overflow. */
  .navbar12_dropdown-list.w-dropdown-list > *,
  .navbar12_dropdown-list-2.w-dropdown-list > * {
    min-height: 0;
    overflow: hidden;
  }

  /* w--nav-dropdown-list-open is structural — Webflow puts it on every nav
     dropdown as soon as the mobile menu opens, not on the one that is
     expanded. State comes from is-open, set by js/nav.js. */
  .navbar12_menu-dropdown.is-open > .navbar12_dropdown-list.w-dropdown-list,
  .navbar12_menu-dropdown.is-open > .navbar12_dropdown-list-2.w-dropdown-list,
  .navbar2_menu-dropdown.is-open > .w-dropdown-list {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
    visibility: visible;
    transition:
      grid-template-rows 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.2s ease,
      visibility 0s linear 0s;
  }

  /* The panel is a two-column grid on desktop (4 links + 3). Stacked on
     mobile those columns kept their 24px row-gap, which read as an
     unexplained break after the fourth item. Collapsing it to zero then made
     the boundary tighter than the rest. Links sit 8px apart within a column,
     so the gap matches that and the seven read as one evenly spaced list. */
  .navbar12_dropdown-content {
    row-gap: 8px;
  }

  /* Webflow paints the panel --color-scheme-1--background (#f2f2f2) and
     repaints it white through a .w--open rule. The mobile accordion uses its
     own is-open class, so that rule never fires and the panel rendered as a
     grey block inside a white menu.
     Set explicitly rather than relying on which class wins: inside the mobile
     menu these are part of the same list, not a floating panel, so they should
     carry no surface of their own. */
  .navbar12_dropdown-list.w-dropdown-list,
  .navbar12_dropdown-list-2.w-dropdown-list {
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }

  /* IX2 leaves inline transform and height on these; both would win over the
     stylesheet and pin the panel shut. nav.js clears height at init. */
  .navbar12_dropdown-list[style*="translate3d"],
  .navbar12_dropdown-list-2[style*="translate3d"] {
    transform: none !important;
  }
}

/* The chevron should reflect state rather than sitting static. */
.dropdown-chevron {
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.w--open > .navbar12_dropdown-toggle .dropdown-chevron,
.navbar12_dropdown-toggle.w--open .dropdown-chevron,
.is-open > .navbar12_dropdown-toggle .dropdown-chevron,
.is-open > .w-dropdown-toggle .dropdown-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .navbar12_dropdown-list,
  .navbar12_dropdown-list-2,
  .dropdown-chevron {
    transition-duration: 0.01ms;
  }
}