/* VG Communities · site stylesheet (child theme: css/vg-site.css)
   Only rules Bricks global classes can't express natively: base elements, pseudo-elements,
   multi-layer gradients, WP/plugin markup, state selectors, descendant rules.
   Tokens: --vg-* (Bricks global variables). Bricks class CSS is scoped `.class.brxe-*` (0,2,0),
   so overrides of class-set properties below use `body` for extra specificity. */

/* ===== Fonts (self-hosted; Bricks only prints custom-font CSS for fonts picked in its font control) ===== */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/wp-content/uploads/2026/09/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/wp-content/uploads/2026/09/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/wp-content/uploads/2026/09/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/wp-content/uploads/2026/09/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/wp-content/uploads/2026/09/BarlowCondensed-700.woff2") format("woff2"); }

/* ===== Base ===== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(h1, h2, h3, h4, h5, h6) { margin: 0; text-wrap: balance; }
:where(p) { margin: 0; }
a { transition: color var(--vg-duration) var(--vg-ease); }
a:hover { color: var(--vg-color-primary-hover); }
::placeholder { color: var(--vg-color-text-dim); opacity: 1; letter-spacing: .12em; text-transform: uppercase; font-size: var(--vg-font-size-label); font-weight: 600; }
:focus-visible { outline: 2px solid var(--vg-color-primary); outline-offset: 2px; }
::selection { background: var(--vg-color-primary); color: var(--vg-color-on-primary); }
img { max-width: 100%; height: auto; }

/* ===== Typography helpers ===== */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h1, .h2, .h3, .post-card__title, .post-feature__title, .stat__label { text-wrap: balance; }
.lead, .muted, .community-card__desc, .prose p { text-wrap: pretty; }
.prose > * + * { margin-top: var(--vg-space-xl); }
.prose h2, .prose h3 { margin-top: var(--vg-space-4xl); font-family: var(--vg-font-heading); font-weight: 700; text-transform: uppercase; color: var(--vg-color-text); }
.prose h2 { font-size: var(--vg-font-size-3xl); letter-spacing: var(--vg-tracking-heading); line-height: var(--vg-leading-snug); }
.prose h3 { font-size: var(--vg-font-size-xl); letter-spacing: var(--vg-tracking-title); }
.prose strong { color: var(--vg-color-text); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--vg-space-sm); }
.prose img { border-radius: var(--vg-radius-lg); }
.prose blockquote { margin: var(--vg-space-sm) 0; padding: var(--vg-space-2xl) 28px; background: var(--vg-color-surface); border-radius: var(--vg-radius-lg); font-family: var(--vg-font-heading); font-size: var(--vg-font-size-3xl); font-weight: 600; line-height: var(--vg-leading-quote); letter-spacing: var(--vg-tracking-tight); color: var(--vg-color-text); }
.prose blockquote p { margin: 0; }

/* ===== Header ===== */
.site-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header__logo img, .site-header__logo svg { height: 28px; width: auto; display: block; }
.nav__link[aria-current~="page"], .nav .current-menu-item > a { color: var(--vg-color-primary); }
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--vg-color-text); }
@media (max-width: 991px) {
  .site-header .nav, .site-header .search { display: none; }
}

/* ===== Search ===== */
.search:focus-within { border-color: var(--vg-color-primary); }
.search input, .search__input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; padding: 0; color: var(--vg-color-text); font: inherit; font-size: var(--vg-font-size-sm); }

/* ===== Filters (links, Bricks Query Filters, state) ===== */
.filter__icon img, .filter__icon svg { width: var(--vg-icon-md); height: var(--vg-icon-md); display: block; }
.filter__icon svg { fill: currentColor; }
.filter__item.is-active, .filter__item[aria-current~="page"], .filter__item[aria-pressed="true"], .brx-option-active .filter__item, .brx-option-active.filter__item { color: var(--vg-color-text); }
.filter__item.is-active .filter__icon, .filter__item[aria-current~="page"] .filter__icon, .filter__item[aria-pressed="true"] .filter__icon,
.brx-option-active .filter__icon { background: var(--vg-color-primary); box-shadow: 0 0 0 var(--vg-ring-width) var(--vg-color-primary-ring); color: var(--vg-color-on-primary); }
@media (max-width: 991px) {
  /* Filter groups become horizontal scrolling pill rows that bleed to the screen edge. */
  .filter__scroller, .filter__group > .filter__links { display: flex; flex-direction: row; gap: var(--vg-space-sm); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--vg-gutter) * -1); padding-inline: var(--vg-gutter); }
  .filter__scroller::-webkit-scrollbar, .filter__group > .filter__links::-webkit-scrollbar { display: none; }
  .filter__scroller .filter__item { flex-shrink: 0; min-height: var(--vg-control-h-md); padding-right: var(--vg-space-md); border-radius: var(--vg-radius-pill); background: var(--vg-color-surface); }
  .filter__scroller .filter__icon { border-radius: var(--vg-radius-pill); }
  .filter__group > .filter__links > * { flex-shrink: 0; }
  .filter__group > .filter__links .filter__item { flex-shrink: 0; white-space: nowrap; min-height: var(--vg-control-h-md); padding-right: var(--vg-space-md); border-radius: var(--vg-radius-pill); background: var(--vg-color-surface); }
  .filter__group > .filter__links .filter__icon { border-radius: var(--vg-radius-pill); }
  .filter__group > .filter__links .filter__link { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--vg-control-h-md); padding: 0 var(--vg-space-md); border-radius: var(--vg-radius-pill); background: var(--vg-color-surface); }
  .filter { gap: var(--vg-space-xl); }
  body .site-header .site-header__inner { flex-wrap: nowrap; gap: var(--vg-space-md); }
  body .site-header .site-header__spacer { display: none; }
  body .site-header .site-header__actions { margin-left: auto; }
  body .site-header .site-header__toggle { margin-right: -8px; }
}

/* ===== Section head ===== */
.section-head__mark img, .section-head__mark svg { width: var(--vg-icon-lg); height: var(--vg-icon-lg); display: block; }

/* ===== Cards ===== */
.community-card__image img, .community-card__media img, .post-card__media img, .list-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.community-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.community-card__more { color: var(--vg-color-text); font-weight: 600; }
body .community-card.is-featured { background: linear-gradient(180deg, var(--vg-color-primary-soft), var(--vg-color-primary-faint)), var(--vg-color-surface); box-shadow: var(--vg-shadow-featured); }
@media (hover: hover) {
  .community-card:hover, .post-card:hover { transform: var(--vg-lift); }
}
.community-card:hover, .post-card:hover, .list-row:hover { color: var(--vg-color-text); }
.community-card:focus-visible, .post-card:focus-visible, .list-row:focus-visible { outline-offset: 3px; }

/* ===== Badges / chips / status ===== */
.badge svg { width: var(--vg-icon-xs); height: var(--vg-icon-xs); fill: currentColor; }
.chip.is-active, input:checked + .chip, .brx-option-active .chip { background: var(--vg-color-primary); color: var(--vg-color-on-primary); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ===== Pagination (WP .page-numbers output) ===== */
.pagination ul.page-numbers { display: flex; gap: var(--vg-space-sm); margin: 0; padding: 0; list-style: none; }
.pagination .page-numbers:not(ul) { display: grid; place-items: center; min-width: var(--vg-control-h-md); height: var(--vg-control-h-md); padding: 0 var(--vg-space-lg); border-radius: var(--vg-radius); background: var(--vg-color-surface); color: var(--vg-color-text); font-weight: 600; }
.pagination a.page-numbers:hover { background: var(--vg-color-surface-raised); color: var(--vg-color-text); }
.pagination .page-numbers.current { background: var(--vg-color-primary); color: var(--vg-color-on-primary); }
.pagination .page-numbers.dots { background: none; color: var(--vg-color-text-dim); min-width: 0; padding: 0 4px; }
.pagination .next, .pagination .prev { font-size: var(--vg-font-size-xs); letter-spacing: var(--vg-tracking-label); text-transform: uppercase; }

/* ===== Forms (Bricks form element + .input) ===== */
.input, .brxe-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]), .brxe-form select, .brxe-form textarea {
  width: 100%; min-height: var(--vg-control-h-lg); padding: 0 var(--vg-input-pad-x); background: var(--vg-color-surface-raised); border: 1px solid var(--vg-color-border); border-radius: var(--vg-radius); color: var(--vg-color-text); font: inherit; font-size: var(--vg-font-size-sm); outline: 0; transition: border-color var(--vg-duration) var(--vg-ease); }
.input:focus, .brxe-form input:focus, .brxe-form select:focus, .brxe-form textarea:focus { border-color: var(--vg-color-primary); }
textarea.input, .brxe-form textarea { padding: 12px var(--vg-input-pad-x); line-height: var(--vg-leading-body); }
select.input, .brxe-form select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--vg-color-text-dim) 50%), linear-gradient(135deg, var(--vg-color-text-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.brxe-form input[type=checkbox], .brxe-form input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--vg-color-primary); }
@media (max-width: 767px) { .input, .brxe-form input, .brxe-form select, .brxe-form textarea { font-size: 16px; } }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--vg-color-border); }
.copy-field { font-family: var(--vg-font-mono); }

/* ===== Hero / CTA / FAQ (multi-layer gradients) ===== */
body .hero { background: radial-gradient(ellipse 45% 70% at 12% 0%, var(--vg-color-glow-violet), transparent 70%), radial-gradient(ellipse 40% 60% at 88% 0%, var(--vg-color-glow-teal), transparent 70%), var(--vg-color-bg); }
body .hero--game { background: radial-gradient(ellipse 50% 90% at 0% 0%, var(--game-glow, var(--vg-color-glow-game)), transparent 70%), radial-gradient(ellipse 40% 60% at 100% 0%, var(--vg-color-glow-violet-soft), transparent 70%), var(--vg-color-bg); }
body .cta { background: radial-gradient(ellipse 60% 100% at 100% 50%, var(--vg-color-glow-violet-soft), transparent 70%), var(--vg-color-surface); }
.hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .hero__grid > .button, .hero__grid > .brxe-button { grid-column: 1 / -1; } }
.faq__item summary, .faq__item .accordion-title-wrapper { cursor: pointer; list-style: none; font-family: var(--vg-font-heading); font-size: var(--vg-font-size-xl); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item p { margin: 10px 0 0; font-size: var(--vg-font-size-sm); color: var(--vg-color-text-muted); }

/* ===== Footer ===== */
.site-footer__links a { font-size: var(--vg-font-size-sm); color: var(--vg-color-text-muted); }
.site-footer__links a:hover, .site-footer__bar a:hover { color: var(--vg-color-text); }
.site-footer__bar a { color: inherit; }

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .community-card:hover, .post-card:hover { transform: none; }
}

/* ===== Header (template wrapper, nav menu, search) ===== */
/* Sticky lives on Bricks' <header id="brx-header"> wrapper: a sticky child of a same-height parent never sticks. */
#brx-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
body .site-header { position: relative; top: auto; }
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
.site-header__logo-link { display: flex; align-items: center; flex-shrink: 0; }
.site-header .nav .bricks-nav-menu { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.site-header .nav .bricks-nav-menu > li > a { display: inline-flex; align-items: center; gap: var(--vg-space-xs); color: var(--vg-color-text); font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; }
.site-header .nav .bricks-nav-menu > li > a:hover, .site-header .nav .current-menu-item > a, .site-header .nav .current_page_item > a { color: var(--vg-color-primary); }
.site-header .nav .nav__submit > a::before { content: "+"; color: var(--vg-color-primary); font-size: 16px; line-height: 1; }
.search form { display: flex; align-items: center; gap: var(--vg-space-md); width: 100%; height: 100%; margin: 0; }
.search button { order: -1; display: flex; padding: 0; background: none; border: 0; color: var(--vg-color-text-dim); cursor: pointer; }
.search button svg, .search button i { width: var(--vg-icon-sm); height: var(--vg-icon-sm); font-size: var(--vg-icon-sm); }
body .search input[type=search] { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: 0; color: var(--vg-color-text); font: inherit; font-size: var(--vg-font-size-sm); }
.site-header__login { color: var(--vg-color-text); font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; }
.site-header__login:hover { color: var(--vg-color-primary); }
@media (max-width: 991px) {
  .site-header .site-header__login, .site-header .account-menu__name { display: none; }
}
@media (max-width: 767px) { .site-header .account-menu { display: none; } }

/* ===== Account menu (header, logged in) (behaviour: js/account-menu.js) ===== */
body .account-menu { position: relative; display: flex; align-items: center; }
body .account-menu__trigger { display: flex; align-items: center; gap: var(--vg-space-sm); margin: 0; padding: 4px var(--vg-space-sm) 4px 4px; border: 1px solid var(--vg-color-border); border-radius: var(--vg-radius-pill); background: var(--vg-color-surface); color: var(--vg-color-text); font-family: var(--vg-font-body); font-size: var(--vg-font-size-sm); font-weight: 600; line-height: 1; cursor: pointer; transition: background-color var(--vg-duration) var(--vg-ease), border-color var(--vg-duration) var(--vg-ease); }
body .account-menu__trigger:hover, body .account-menu__trigger[aria-expanded="true"] { background: var(--vg-color-surface-raised); border-color: var(--vg-color-border-strong); }
body .account-menu__avatar { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--vg-color-primary); color: var(--vg-color-on-primary); font-family: var(--vg-font-heading); font-weight: 700; }
body .account-menu__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .account-menu__name { max-width: 14ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body .account-menu__chevron { flex-shrink: 0; width: 7px; height: 7px; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .65; transition: transform .18s ease, opacity .15s ease; }
body .account-menu__trigger[aria-expanded="true"] .account-menu__chevron { transform: translateY(1px) rotate(-135deg); opacity: 1; }
body .account-menu__panel { display: none; position: absolute; top: calc(100% + var(--vg-space-sm)); right: 0; z-index: 120; width: 240px; max-width: calc(100vw - 32px); padding: var(--vg-space-sm); border: 1px solid var(--vg-color-border); border-radius: var(--vg-radius-lg); background: var(--vg-color-surface); box-shadow: var(--vg-shadow-panel); }
body .account-menu.is-open .account-menu__panel { display: block; animation: vg-account-in .14s ease-out both; }
body .account-menu__panel[data-align="left"] { right: auto; left: 0; }
@keyframes vg-account-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
body .account-menu__meta { padding: var(--vg-space-sm) var(--vg-space-md) var(--vg-space-xs); font-size: var(--vg-font-size-xs); color: var(--vg-color-text-dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body .account-menu__item { display: block; padding: var(--vg-space-sm) var(--vg-space-md); border-radius: var(--vg-radius); color: var(--vg-color-text); font-size: var(--vg-font-size-sm); line-height: 1.3; }
body .account-menu__item:hover, body .account-menu__item:focus-visible { background: var(--vg-color-surface-raised); color: var(--vg-color-text); }
body .account-menu__item--verify { color: var(--vg-color-warning); }
body .account-menu__item--logout { color: var(--vg-color-text-muted); }
body .account-menu__divider { display: block; height: 1px; margin: var(--vg-space-xs) var(--vg-space-2xs); background: var(--vg-color-border); }
@media (scripting: none) {
  body .account-menu__trigger { display: none; }
  body .account-menu__panel { display: flex; gap: var(--vg-space-md); position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  body .account-menu__meta, body .account-menu__divider { display: none; }
}

/* ===== Mobile off-canvas (BricksExtras xoffcanvasnestable) ===== */
.offcanvas-nav { display: flex; flex-direction: column; gap: var(--vg-space-3xl); width: 100%; }
.offcanvas-nav__top { display: flex; align-items: center; justify-content: space-between; }
.offcanvas-nav__top img { height: 24px; width: auto; }
.offcanvas-nav__section { display: flex; flex-direction: column; gap: var(--vg-space-2xs); }
.offcanvas-nav__title { margin-bottom: var(--vg-space-sm); font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; color: var(--vg-color-primary); }
.offcanvas-nav__link { display: flex; align-items: center; min-height: 48px; color: var(--vg-color-text); font-family: var(--vg-font-heading); font-size: var(--vg-font-size-xl); font-weight: 700; letter-spacing: var(--vg-tracking-title); text-transform: uppercase; box-shadow: var(--vg-shadow-hairline-b); }
.offcanvas-nav__link:hover { color: var(--vg-color-primary); }
.offcanvas-nav__link--verify { color: var(--vg-color-warning); }
.offcanvas-nav .search { width: 100%; }
.offcanvas-nav__actions { display: flex; flex-direction: column; gap: var(--vg-space-md); }

/* Featured community card: ring + tint whenever the (conditional) Featured badge rendered. */
body .community-card:has(.badge--featured) { background: linear-gradient(180deg, var(--vg-color-primary-soft), var(--vg-color-primary-faint)), var(--vg-color-surface); box-shadow: var(--vg-shadow-featured); }

/* ===== Footer menus (nav-menu element output) ===== */
.site-footer .bricks-nav-menu { display: flex; margin: 0; padding: 0; list-style: none; }
.site-footer__links .bricks-nav-menu { flex-direction: column; gap: var(--vg-space-md); }
.site-footer__legal .bricks-nav-menu { flex-direction: row; gap: var(--vg-space-xl); }
.site-footer__legal a { font-size: var(--vg-font-size-xs); color: var(--vg-color-text-dim); }
.site-footer__legal a:hover { color: var(--vg-color-text); }
.site-footer__logo-link img, .site-footer .site-header__logo { height: 28px; width: auto; }

/* ===== Inline term icons (vg_term_icon) ===== */
.vg-icon { display: inline-flex; line-height: 0; }
.vg-icon svg { width: 100%; height: 100%; }
.filter__icon .vg-icon { width: var(--vg-icon-md); height: var(--vg-icon-md); }
.section-head__mark .vg-icon { width: var(--vg-icon-lg); height: var(--vg-icon-lg); }

/* ===== Breadcrumbs (echo output) + sort control ===== */
nav.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--vg-font-size-xs); color: var(--vg-color-text-dim); }
.sort { display: flex; align-items: center; gap: var(--vg-space-md); margin: 0; }
.sort__label { font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-meta); text-transform: uppercase; color: var(--vg-color-text-dim); white-space: nowrap; }
body .sort__select { width: auto; min-width: 180px; min-height: var(--vg-control-h); padding: 0 36px 0 var(--vg-input-pad-x); background-color: var(--vg-color-surface-raised); border: 1px solid var(--vg-color-border); border-radius: var(--vg-radius); color: var(--vg-color-text); font: inherit; font-size: var(--vg-font-size-sm); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--vg-color-text-dim) 50%), linear-gradient(135deg, var(--vg-color-text-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
@media (max-width: 767px) { .section-head { flex-wrap: wrap; } }
img.listing-hero, img.listing__logo, img.list-row__thumb, .hero__cover img { object-fit: cover; }

/* ===== Chips as links / nav states ===== */
a.chip:hover { background: var(--vg-color-surface-raised); color: var(--vg-color-text); }
.chip[aria-current~="page"] { background: var(--vg-color-primary); color: var(--vg-color-on-primary); }
.post-feature:hover { color: var(--vg-color-text); }
.post-feature:hover .post-feature__title { color: var(--vg-color-primary-hover); }

/* ===== Fluent Forms skin (all forms) ===== */
.fluentform { font-family: var(--vg-font-body); color: var(--vg-color-text); }
.fluentform .ff-el-group { margin-bottom: var(--vg-space-xl); }
.fluentform .ff-el-input--label label, .fluentform .ff-el-input--label { font-size: var(--vg-font-size-label); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; color: var(--vg-color-text-muted); }
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--vg-color-primary); }
body .fluentform .ff-el-form-control { min-height: var(--vg-control-h-lg); padding: 10px var(--vg-input-pad-x); background: var(--vg-color-surface-raised); border: 1px solid var(--vg-color-border); border-radius: var(--vg-radius); color: var(--vg-color-text); font: inherit; font-size: var(--vg-font-size-sm); box-shadow: none; transition: border-color var(--vg-duration) var(--vg-ease); }
body .fluentform .ff-el-form-control:focus { border-color: var(--vg-color-primary); outline: none; background: var(--vg-color-surface-raised); color: var(--vg-color-text); }
body .fluentform textarea.ff-el-form-control { min-height: 160px; line-height: var(--vg-leading-body); }
body .fluentform select.ff-el-form-control { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--vg-color-text-dim) 50%), linear-gradient(135deg, var(--vg-color-text-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
body .fluentform select.ff-el-form-control option { background: var(--vg-color-surface-raised); color: var(--vg-color-text); }
.fluentform .ff-el-help-message { margin-top: var(--vg-space-xs); font-size: var(--vg-font-size-xs); font-style: normal; color: var(--vg-color-text-dim); }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--vg-color-primary); }
.fluentform .ff-el-is-error .text-danger, .fluentform .error.text-danger { margin-top: var(--vg-space-xs); font-size: var(--vg-font-size-xs); color: var(--vg-color-primary-hover); }
/* Checkbox / radio groups render as chips (platforms, regions, languages). */
.fluentform .ff-el-form-check { margin: 0; }
.fluentform .ff_list_inline .ff-el-form-check { display: inline-flex; margin: 0 var(--vg-space-sm) var(--vg-space-sm) 0; }
.fluentform .ff_list_inline .ff-el-form-check label.ff-el-form-check-label { display: inline-flex; align-items: center; height: var(--vg-control-h-sm); padding: 0 var(--vg-space-md); border-radius: var(--vg-radius-pill); background: var(--vg-color-fill-subtle); color: var(--vg-color-text); font-size: var(--vg-font-size-xs); font-weight: 600; cursor: pointer; transition: background-color var(--vg-duration) var(--vg-ease); }
.fluentform .ff_list_inline .ff-el-form-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fluentform .ff_list_inline .ff-el-form-check:has(input:checked) label.ff-el-form-check-label { background: var(--vg-color-primary); color: var(--vg-color-on-primary); }
.fluentform .ff_list_inline .ff-el-form-check:has(input:focus-visible) label.ff-el-form-check-label { outline: 2px solid var(--vg-color-primary); outline-offset: 2px; }
.fluentform .ff-el-form-check-input { accent-color: var(--vg-color-primary); width: 18px; height: 18px; }
.fluentform .ff-el-form-check-label { color: var(--vg-color-text-muted); font-size: var(--vg-font-size-sm); }
/* Uploads */
.fluentform .ff_upload_btn.ff-btn { display: inline-flex; align-items: center; height: var(--vg-control-h); padding: 0 var(--vg-button-pad-x-sm); background: transparent; border: 1.5px dashed var(--vg-color-border-strong); border-radius: var(--vg-radius); color: var(--vg-color-text); font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; }
.fluentform .ff_upload_btn.ff-btn:hover { border-color: var(--vg-color-text); background: transparent; }
.fluentform .ff-uploaded-list .ff-upload-preview { background: var(--vg-color-surface-raised); border: 1px solid var(--vg-color-border); border-radius: var(--vg-radius); }
.fluentform .ff-upload-filename, .fluentform .ff-upload-filesize { color: var(--vg-color-text-muted); }
/* Submit */
body .fluentform .ff-btn-submit, body .fluentform button.ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; height: var(--vg-control-h-lg); padding: 0 var(--vg-button-pad-x); background: var(--vg-color-primary) !important; border: 0; border-radius: var(--vg-radius); color: var(--vg-color-on-primary) !important; font-family: var(--vg-font-body); font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; box-shadow: none; }
body .fluentform .ff-btn-submit:hover { background: var(--vg-color-primary-hover) !important; opacity: 1; }
.ff-message-success { padding: var(--vg-space-xl); background: var(--vg-color-success-soft); border: 0; border-radius: var(--vg-radius); color: var(--vg-color-text); box-shadow: none; }
.ff-errors-in-stack .error { color: var(--vg-color-primary-hover); }
.fluentform .ff-t-container { gap: var(--vg-space-lg); }
.success-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--vg-color-success-soft); color: var(--vg-color-success); }
.success-mark svg { width: 36px; height: 36px; }

/* ===== Auth pages (Bricks form element) ===== */
.auth-form.brxe-form { display: flex; flex-direction: column; gap: var(--vg-space-lg); }
.auth-form .form-group { padding: 0; margin: 0; }
.auth-form label { font-size: var(--vg-font-size-label); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; color: var(--vg-color-text-muted); }
.auth-form .options-wrapper label, .auth-form .form-group.checkbox label, .auth-form .form-group[class*="rememberme"] label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--vg-font-size-sm); }
body .auth-form button[type=submit], body .brxe-form .bricks-button { width: 100%; height: var(--vg-control-h-lg); justify-content: center; background: var(--vg-color-primary); color: var(--vg-color-on-primary); border-radius: var(--vg-radius); font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; }
body .auth-form button[type=submit]:hover { background: var(--vg-color-primary-hover); }
.brxe-form .message { border-radius: var(--vg-radius); padding: var(--vg-space-md) var(--vg-space-lg); font-size: var(--vg-font-size-sm); }
.brxe-form .message.success { background: var(--vg-color-success-soft); color: var(--vg-color-text); }
.brxe-form .message.error { background: var(--vg-color-primary-soft); color: var(--vg-color-text); }
.auth-card a:not(.button):not(.bricks-button) { color: var(--vg-color-primary); }

/* ===== Dashboard + save toggle ===== */
.dash-nav__link[aria-current~="page"] { background: var(--vg-color-primary-soft); color: var(--vg-color-text); }
.dash-nav__meta { font-size: var(--vg-font-size-xs); color: var(--vg-color-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-toggle[aria-pressed="true"] { border-color: var(--vg-color-primary); color: var(--vg-color-primary); }
.save-toggle[aria-pressed="true"]::before { content: "★ "; }
.newsletter-form .ff-el-group { margin-bottom: var(--vg-space-md); }
.newsletter-form .ff-el-input--label { display: none; }
.newsletter-form .ff_submit_btn_wrapper { margin: 0; }
@media (min-width: 768px) { .newsletter-form form.frm-fluent-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--vg-space-md); align-items: start; } .newsletter-form .ff-el-group { margin: 0; } }

/* ===== Audit fixes (common Bricks issues) ===== */
/* Bricks nav-menu adds li margin on top of the flex gap: keep spacing in the gap only. */
body .brxe-nav-menu .bricks-nav-menu > li { margin: 0; }
/* Equal-height cards: the loop element is the grid cell; the card fills it, the body flexes. */
.grid-cards > * { display: flex; }
body .grid-cards > * > .community-card, body .grid-cards > * > .post-card { height: 100%; width: 100%; }
body .community-card__body, body .post-card__body { flex: 1 1 auto; }
body .post-card__body > .meta:last-child { margin-top: auto; }
/* Overflow guards the class API strips (min-width:0) and long user text. */
body .community-card__row > *, body .list-row__body, body .listing__title, body .layout-sidebar > *, body .layout-aside > *, body .layout-split > *, body .hero__grid > * { min-width: 0; }
body .community-card__title { flex: 1 1 auto; }
.facts__value, .prose, .lead, .community-card__desc, .list-row__title, .listing__title h1 { overflow-wrap: anywhere; }
/* Block buttons are sized by their column: let long labels wrap instead of spilling. */
body .button--block { white-space: normal; text-align: center; line-height: 1.3; }
/* Touch targets on phones. */
@media (max-width: 767px) {
  body .site-footer__links a, body .site-footer__legal a, body .site-footer__link, body .link-caps, body .report-link, body .filter__link { display: inline-flex; align-items: center; min-height: 40px; }
  body .site-header__logo-link { min-height: 44px; }
}
/* Card titles: two clamped lines instead of a hard one-line ellipsis; platform label stays top-right. */
body .community-card__row { align-items: flex-start; }
body .community-card__title.brxe-heading { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; line-height: var(--vg-leading-snug); }
body .community-card__meta { flex-shrink: 0; padding-top: 3px; }
/* Shortcode elements default to full width; inside a section head they size to their content. */
body .section-head > .brxe-shortcode { width: auto; flex: 0 0 auto; }
body .section-head > .h2 { flex: 0 1 auto; }
/* Prose: spacing between blocks comes from `.prose > * + *` only; no browser default margins at the edges. */
.prose ul, .prose ol, .prose blockquote, .prose figure { margin-bottom: 0; }
.prose > :first-child, .prose > .brxe-post-content > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose ol { padding-left: 1.4em; }
.prose li::marker { color: var(--vg-color-text-dim); }
/* Form controls match the 44px control token exactly (buttons, inputs, selects line up). */
body .fluentform input.ff-el-form-control, body .fluentform select.ff-el-form-control, .input, .brxe-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]), .brxe-form select { box-sizing: border-box; height: var(--vg-control-h-lg); min-height: 0; padding-top: 0; padding-bottom: 0; line-height: normal; }
/* Fluent Forms help tooltip: brand tokens, not plugin blue. */
.fluentform .ff-el-tooltip svg, .fluentform .ff-el-tooltip svg path { fill: var(--vg-color-text-dim); }
.fluentform .ff-el-tooltip:hover svg, .fluentform .ff-el-tooltip:hover svg path { fill: var(--vg-color-text); }
.ff-el-pop-content { background: var(--vg-color-surface-raised) !important; color: var(--vg-color-text) !important; border-radius: var(--vg-radius) !important; font-size: var(--vg-font-size-xs) !important; }
/* Fluent Forms reads its own variables: map them to VG tokens (overrides plugin defaults at higher specificity than :root). */
body .fluentform { --fluentform-input-select-height: var(--vg-control-h-lg); --fluentform-primary: var(--vg-color-primary); --fluentform-secondary: var(--vg-color-text-muted); --fluentform-danger: var(--vg-color-primary-hover); --fluentform-border-color: var(--vg-color-border); --fluentform-border-radius: var(--vg-radius); }
/* HANDOFF §5: community grid drops 4 → 3 columns below 1280px (no Bricks breakpoint exists there). */
@media (min-width: 992px) and (max-width: 1279px) {
  body .layout-sidebar .grid-cards:not(.grid-cards--3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Managed list rows (dashboard): named areas so actions never squeeze the title or overflow on phones. */
body .list-row--manage { grid-template-columns: 96px minmax(0, 1fr) auto auto; grid-template-areas: "thumb body status views" "thumb actions actions actions"; row-gap: var(--vg-space-md); align-items: center; }
body .list-row--manage > .list-row__thumb { grid-area: thumb; align-self: start; }
body .list-row--manage > .list-row__body { grid-area: body; }
body .list-row--manage > .list-row__status { grid-area: status; }
body .list-row--manage > .list-row__views { grid-area: views; }
body .list-row--manage > .list-row__actions { grid-area: actions; flex-wrap: wrap; }
@media (max-width: 991px) {
  body .list-row--manage { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "thumb body status" "thumb actions actions"; }
}
@media (max-width: 767px) {
  body .list-row--manage { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "thumb body" "status status" "actions actions"; }
  body .list-row--manage > .list-row__thumb { align-self: center; }
}

/* ===== Classes used in echo/no-results markup (Bricks prints global-class CSS only where an element carries the class) ===== */
.status { display: inline-flex; align-items: center; gap: var(--vg-space-xs); font-size: var(--vg-font-size-xs); font-weight: 600; }
.status--published { color: var(--vg-color-success); }
.status--pending { color: var(--vg-color-warning); }
.status--draft { color: var(--vg-color-text-dim); }
.chip { display: inline-flex; align-items: center; height: var(--vg-control-h-sm); padding: 0 var(--vg-space-md); border-radius: var(--vg-radius-pill); font-size: var(--vg-font-size-xs); font-weight: 600; background: var(--vg-color-fill-subtle); color: var(--vg-color-text); }
.chips { display: flex; flex-wrap: wrap; gap: var(--vg-space-sm); }
.filter__initial { font-family: var(--vg-font-heading); font-weight: 700; font-size: 16px; line-height: 1; color: var(--vg-color-text); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--vg-space-lg); padding: var(--vg-space-6xl) var(--vg-space-2xl); text-align: center; background: var(--vg-color-surface); border-radius: var(--vg-radius-lg); color: var(--vg-color-text-muted); width: 100%; }
.empty-state .h3 { margin: 0; font-family: var(--vg-font-heading); font-size: var(--vg-font-size-xl); font-weight: 700; letter-spacing: var(--vg-tracking-title); text-transform: uppercase; color: var(--vg-color-text); }
.empty-state p { margin: 0; }
/* No-results markup is inside the grid: let it span every column. */
.grid-cards > .bricks-no-results, .grid-cards > .empty-state, .grid-cards .brx-loop-no-results, .stack > .empty-state { grid-column: 1 / -1; }
a.button, .empty-state .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--vg-space-xs); height: var(--vg-control-h-lg); padding: 0 var(--vg-button-pad-x); border: 1px solid transparent; border-radius: var(--vg-radius); font-family: var(--vg-font-body); font-size: var(--vg-font-size-xs); font-weight: 600; letter-spacing: var(--vg-tracking-label); text-transform: uppercase; white-space: nowrap; }
.empty-state .button--sm { height: var(--vg-control-h); padding: 0 var(--vg-button-pad-x-sm); }
.empty-state .button--primary { background: var(--vg-color-primary); color: var(--vg-color-on-primary); }
.empty-state .button--primary:hover { background: var(--vg-color-primary-hover); color: var(--vg-color-on-primary); }
.empty-state .button--secondary { background: transparent; border-color: var(--vg-color-border-strong); color: var(--vg-color-text); }
.empty-state .button--secondary:hover { border-color: var(--vg-color-text); }

/* Archive hero: the cover column exists only when a cover renders (CPT, platform, type archives have none). */
body .hero__grid:not(:has(> .hero__cover)) { grid-template-columns: minmax(0, 1fr) auto; }
body .hero__grid > .button, body .hero__grid > .brxe-button { justify-self: end; width: auto; }
@media (max-width: 767px) {
  body .hero__grid:not(:has(> .hero__cover)) { grid-template-columns: minmax(0, 1fr); }
  body .hero__grid > .button, body .hero__grid > .brxe-button { justify-self: stretch; width: 100%; }
}