/**
* PokerPath — plugin-enqueued layout fixes
*
* Loaded at priority 999 from pokerpath-search.php so this file lands
* after the theme stylesheet and wins the cascade for the rules below.
*
* History:
* v4.17.0 — three sections (sticky-header padding, admin-bar offset,
* [pp_search_open] wrapper fallback).
* v4.17.2 — URGENT REPAIR. Removed the v4.17.0 §1 sticky-header
* padding rule after it caused [pp_search] content to
* render invisible on the homepage and /tournaments/.
* v4.17.3 — Bug-cleanup sprint. Added §3 (calendar visibility
* hardening, Item 1), §4 (active-filters contrast WCAG AA,
* Item 2), §5 (homepage hero pill clearance, Item 3).
* Sections §1 and §2 unchanged from v4.17.2.
*
* Jason's pre-deploy reminder: clear any Customizer → Additional CSS
* rules that touch .site-header, .wp-admin-bar, content padding, or
* homepage hero spacing — the plugin owns those targets now.
*/
/* ======================================================================
§1. WP admin bar compensation (v4.17.2)
====================================================================== */
body.admin-bar .site-header,
body.admin-bar header.site-header,
body.admin-bar #masthead,
body.admin-bar header#masthead {
top: 32px !important;
}
@media screen and (max-width: 782px) {
body.admin-bar .site-header,
body.admin-bar header.site-header,
body.admin-bar #masthead,
body.admin-bar header#masthead {
top: 46px !important;
}
}
/* ======================================================================
§2. [pp_search_open] wrapper — force-show filter panel (v4.17.0)
STRICTLY scoped to .pp-search-open-default. Has ZERO effect on
default [pp_search] rendering. Verified in v4.17.2 audit.
====================================================================== */
.pp-search-open-default .pp-filters.pp-filters-collapsed .pp-filter-grid,
.pp-search-open-default .pp-filters.pp-filters-collapsed .pp-filter-actions,
.pp-search-open-default .pp-filters.pp-filters-collapsed .pp-active-filters {
display: revert !important;
}
/* ======================================================================
§3. Calendar visibility hardening — Item 1 (v4.17.3)
Problem: on /tournaments/, the [pp_tournaments_calendar] disappears
visually after [pp_search] AJAX completes. pokerpath.js only
manipulates #pp-results-list / #pp-results-meta / #pp-pre-search /
#pp-pagination — it does not reference any calendar selector. The
visual disappearance must therefore be caused by a sibling/parent
layout reflow (theme, page builder, or wpautop) hiding the
calendar's container indirectly.
Defensive fix: structurally lock the calendar wrapper as
visible, with an explicit stacking context above the search
results so nothing can cover it. The class-pp-tournaments-calendar
inline JS adds a MutationObserver watchdog as a JS-level
complement to these rules — see render() in that class.
====================================================================== */
.pp-tournaments-cal-v17 {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
z-index: 5;
}
.pp-tournaments-cal-v17 .pp-tc17-grid {
/* Defensive: even if a parent rule tries to hide the grid, force-show. */
display: grid !important;
}
@media (max-width: 768px) {
/* Mobile fallback: grid hidden by inline calendar styles, but mobile
button must still be visible. */
.pp-tournaments-cal-v17 .pp-tc17-grid {
display: none !important;
}
.pp-tournaments-cal-v17 .pp-tc17-mobile {
display: block !important;
}
}
/* ======================================================================
§4. Active-filters bar contrast — Item 2 (v4.17.3)
Problem: filter chips render with `color: #fff` on
`rgba(255,255,255,0.12)` — invisible on dark theme until hover. The
v4.17.0 spec required WCAG AA contrast (4.5:1 minimum). On a dark
~#0a0f1e background, #f3f4f6 text is ~16:1 — passes comfortably.
Touches every plausible candidate selector for the "1 active · Clear"
bar Jason described: filter chips, the results-meta bar, and any
"clear all" affordance inside the active-filters area.
Interactive "Clear" affordances use the design system's gold
accent (#d4af37) so they're visually distinct from label text.
====================================================================== */
.pp-active-filters {
color: #f3f4f6;
}
.pp-active-filters .pp-filter-chip,
.pp-filter-chip {
background: rgba(255, 255, 255, 0.18);
color: #f3f4f6;
border-color: rgba(255, 255, 255, 0.28);
}
.pp-active-filters .pp-filter-chip strong,
.pp-filter-chip strong {
color: #ffffff;
font-weight: 600;
}
.pp-active-filters .pp-filter-chip:hover,
.pp-filter-chip:hover {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.45);
}
.pp-active-filters .pp-chip-remove,
.pp-filter-chip .pp-chip-remove,
.pp-filter-chip button {
color: #f3f4f6 !important;
opacity: 0.85;
}
.pp-active-filters .pp-chip-remove:hover,
.pp-filter-chip .pp-chip-remove:hover,
.pp-filter-chip button:hover {
color: #d4af37 !important;
opacity: 1;
}
/* "Clear" / "Clear all" affordance — gold to match design system. */
.pp-active-filters .pp-clear-all,
.pp-active-filters [data-action="clear"],
.pp-active-filters a[href*="clear"],
.pp-active-filters .pp-active-clear {
color: #d4af37;
text-decoration: underline;
cursor: pointer;
}
.pp-active-filters .pp-clear-all:hover,
.pp-active-filters [data-action="clear"]:hover,
.pp-active-filters a[href*="clear"]:hover,
.pp-active-filters .pp-active-clear:hover {
color: #e6c34d;
}
/* v4.17.3.1 — nested-override protection (per ChatGPT review).
Locks the WCAG AA contrast fix against nested elements that
would otherwise carry their own theme color rules into the
active-filters bar. The gold "Clear" links above stay gold
because their own color rule has higher specificity than the
universal-selector inherit. */
.pp-active-filters * {
color: inherit;
}
/* The "1 active" count badge inside the search button — gold-on-navy
already (var(--pp-gold) on var(--pp-navy)) and high contrast. No
change needed; this rule is a defensive backstop in case theme
overrides break it. */
.pp-filter-count {
color: #0a0f1e !important;
background: #d4af37 !important;
}
/* Results-meta bar (sort indicator + count) — ensure visible text. */
.pp-results-bar,
#pp-results-meta {
color: #f3f4f6;
}
.pp-results-bar #pp-results-count,
.pp-results-bar .pp-sort-indicator,
#pp-results-meta #pp-results-count,
#pp-results-meta .pp-sort-indicator {
color: #f3f4f6;
}
/* ======================================================================
§5. Homepage hero — single owned wrapper (v4.18.0 Item 8)
v4.17.3 introduced `body.home .site-content { padding-top: 60px }`,
then v4.17.3.1 added fallback selectors `body.home #primary, body.home
main, body.home .site-main`. The fallback stack pushed the homepage
search section way down because BOTH .site-content AND #primary (or
main, or .site-main) commonly match the same nesting chain — the
paddings stacked.
v4.18.0 fix per ChatGPT: replace the stacked selectors with a single
dedicated owned wrapper class. The new [pp_home_hero] shortcode emits
its content inside `...
`. The padding
now belongs to the hero wrapper, not the page-level content
container.
Owned target = no stacking risk. Single selector = no theme-class
guesswork. ChatGPT's value: 72px desktop, 48px mobile.
====================================================================== */
body.home .pp-home-hero {
padding-top: 72px;
}
@media (max-width: 768px) {
body.home .pp-home-hero {
padding-top: 48px;
}
}
/* ======================================================================
§6. Homepage light theme — Item 2 (v4.18.0)
Per Design System v1.0 (locked v4.17.1): light theme is default,
dark theme is allowed only on coach-adjacent conversion pages
(/player-plus/). The homepage is currently dark-themed in
production — pre-existing violation from v4.15.0.
These rules force the homepage to render light. Strictly scoped
to body.home so /player-plus/ keeps its dark theme and other pages
are unaffected.
====================================================================== */
body.home {
background: #ffffff;
color: #1a202c;
}
body.home .site-content,
body.home #content,
body.home .site-main,
body.home main {
background: #ffffff;
color: #1a202c;
}
body.home .pp-home-hero {
background: #ffffff;
color: #1a202c;
}
/* Headings on the homepage hero. */
body.home .pp-home-hero h1,
body.home .pp-home-hero h2,
body.home .pp-home-hero .pp-home-hero-headline {
color: #111827;
}
/* Search container on light theme — distinct from page background
via subtle elevation. */
body.home .pp-home-hero .pp-search-wrap {
background: #ffffff;
color: #1a202c;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
padding: 32px;
}
@media (max-width: 768px) {
body.home .pp-home-hero .pp-search-wrap {
padding: 20px;
}
}
body.home .pp-home-hero .pp-search-wrap .pp-filters,
body.home .pp-home-hero .pp-search-wrap .pp-filter-grid {
background: transparent;
color: #1a202c;
}
body.home .pp-home-hero .pp-search-wrap label,
body.home .pp-home-hero .pp-search-wrap .pp-filter-group label {
color: #374151;
}
body.home .pp-home-hero .pp-search-wrap input,
body.home .pp-home-hero .pp-search-wrap select {
background: #ffffff;
color: #1a202c;
border: 1px solid #d1d5db;
}
body.home .pp-home-hero .pp-search-wrap input:focus,
body.home .pp-home-hero .pp-search-wrap select:focus {
border-color: #d4af37;
outline: 2px solid rgba(212, 175, 55, 0.25);
}
/* Light-theme override for [pp_home_upcoming] cards on the homepage
(Item 4). The default cards inherit the existing pp-home-upcoming
styling; light-mode background + dark text here. */
body.home .pp-home-upcoming-section {
background: #ffffff;
color: #1a202c;
padding: 24px 0 32px;
}
body.home .pp-home-upcoming-heading {
color: #111827;
font-size: 20px;
font-weight: 600;
margin: 0 0 12px;
}
body.home .pp-home-upcoming-viewall {
display: inline-block;
margin-top: 14px;
color: #d4af37;
font-weight: 500;
text-decoration: none;
}
body.home .pp-home-upcoming-viewall:hover {
color: #b8932e;
text-decoration: underline;
}
body.home .pp-home-upcoming .pp-home-upcoming-card {
background: #ffffff;
color: #1a202c;
border: 1px solid #e5e7eb;
}
body.home .pp-home-upcoming .pp-home-upcoming-title {
color: #111827;
}
body.home .pp-home-upcoming .pp-home-upcoming-meta,
body.home .pp-home-upcoming .pp-home-upcoming-date,
body.home .pp-home-upcoming .pp-home-upcoming-interest {
color: #4b5563;
}
/* ======================================================================
§7. Homepage hero presentation — Item 1 (v4.18.0)
"Search IS the hero" — the headline is supporting, the search
container dominates visually. Layout: max-width container, search
centered, generous internal padding, subtle elevation distinct from
page background.
====================================================================== */
body.home .pp-home-hero-inner {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
body.home .pp-home-hero-headline {
margin: 0 0 24px;
font-size: 28px;
line-height: 1.3;
font-weight: 500;
color: #111827;
text-wrap: balance;
}
@media (max-width: 768px) {
body.home .pp-home-hero-headline {
font-size: 22px;
margin-bottom: 18px;
}
}
body.home .pp-home-hero-subtext {
margin: -16px 0 24px;
font-size: 15px;
color: #6b7280;
}
body.home .pp-home-hero-search {
/* Inherit .pp-search-open-default behavior (force-expand). */
text-align: left;
}
/* ======================================================================
§8. Tour detail page — Item 5 (v4.18.0)
Light theme per Design System v1.0. Event-first layout: events are
the primary content, metadata is secondary.
====================================================================== */
.pp-tour-detail {
background: #ffffff;
color: #1a202c;
padding: 32px 0;
}
.pp-tour-detail .pp-td-tour-wrap {
max-width: 880px;
margin: 0 auto;
padding: 0 24px;
}
.pp-tour-detail .pp-td-tour-header {
margin-bottom: 24px;
}
.pp-tour-detail .pp-td-tour-title {
margin: 0 0 8px;
font-size: 32px;
font-weight: 600;
color: #111827;
line-height: 1.2;
}
.pp-tour-detail .pp-td-tour-subtitle {
margin: 0;
font-size: 15px;
color: #4b5563;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.pp-tour-detail .pp-td-tour-subtitle i {
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 4px;
}
.pp-tour-detail .pp-td-tour-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0 16px;
}
.pp-tour-detail .pp-td-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: #ffffff;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.pp-tour-detail .pp-td-action:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.pp-tour-detail .pp-td-action.pp-tour-saved {
background: #fef3c7;
border-color: #d4af37;
color: #92400e;
}
.pp-tour-detail .pp-td-tour-disclaimer {
background: #fffbeb;
border-left: 3px solid #d4af37;
border-radius: 6px;
padding: 12px 14px;
font-size: 13px;
color: #78350f;
margin: 0 0 28px;
}
.pp-tour-detail .pp-td-tour-disclaimer i {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 4px;
}
.pp-tour-detail .pp-td-section-title {
margin: 0 0 6px;
font-size: 20px;
font-weight: 600;
color: #111827;
}
.pp-tour-detail .pp-td-tour-events-header {
margin-bottom: 16px;
}
.pp-tour-detail .pp-td-tour-events-count {
margin: 0;
font-size: 14px;
color: #6b7280;
}
.pp-tour-detail .pp-td-tour-events-empty {
background: #f9fafb;
border: 1px dashed #d1d5db;
border-radius: 8px;
padding: 24px;
color: #6b7280;
text-align: center;
}
.pp-tour-detail .pp-td-tour-events-list {
list-style: none;
margin: 0;
padding: 0;
}
.pp-tour-detail .pp-td-tour-event {
background: #ffffff;
border: 1px solid #e5e7eb;
border-left: 3px solid #d4af37;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 10px;
}
.pp-tour-detail .pp-td-tour-event-row1 {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: baseline;
margin-bottom: 6px;
}
.pp-tour-detail .pp-td-tour-event-num {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #d4af37;
font-weight: 600;
}
.pp-tour-detail .pp-td-tour-event-name {
font-size: 16px;
font-weight: 600;
color: #111827;
}
.pp-tour-detail .pp-td-tour-event-flight {
font-size: 12px;
background: #f3f4f6;
color: #4b5563;
padding: 2px 8px;
border-radius: 999px;
font-weight: 500;
}
.pp-tour-detail .pp-td-tour-event-row2 {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
color: #4b5563;
}
.pp-tour-detail .pp-td-tour-event-row2 i {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 3px;
}
.pp-tour-detail .pp-td-tour-meta {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
.pp-tour-detail .pp-td-tour-meta-list {
margin: 0;
padding: 0;
}
.pp-tour-detail .pp-td-tour-meta-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #f3f4f6;
font-size: 14px;
}
.pp-tour-detail .pp-td-tour-meta-row dt {
color: #6b7280;
margin: 0;
}
.pp-tour-detail .pp-td-tour-meta-row dt i {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 4px;
}
.pp-tour-detail .pp-td-tour-meta-row dd {
color: #111827;
font-weight: 500;
margin: 0;
}
@media (max-width: 768px) {
.pp-tour-detail .pp-td-tour-title { font-size: 24px; }
.pp-tour-detail .pp-td-section-title { font-size: 18px; }
.pp-tour-detail .pp-td-tour-event-row1 { gap: 6px; }
.pp-tour-detail .pp-td-tour-event-name { font-size: 15px; }
}
/* ======================================================================
§9. Clickable tour names on /poker-tours/ — Item 6 (v4.18.0)
====================================================================== */
a.pp-tour-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
transition: color 0.15s, border-color 0.15s;
}
a.pp-tour-link:hover {
color: #d4af37;
border-bottom-color: #d4af37;
}
/* ======================================================================
§11. Homepage hero mobile filter suppression — v4.18.1 patch
Problem: v4.18.0 [pp_home_hero] force-expanded the filter panel on
ALL viewports including mobile. Spec called for collapsed-on-mobile.
Fix: scoped to .pp-home-hero ONLY (does NOT affect [pp_search_open]
standalone usage on other pages — that's v4.17.1 functionality and
out of scope for this patch). Force-hides the filter grid +
actions + active filters at <768px when pokerpath.js's
`pp-filters-collapsed` class is present — which, since pokerpath.js
adds it unconditionally and the v4.18.1 JS viewport guard skips
force-removal on mobile, will be the natural state on every mobile
page load.
Order matters: this rule lives AFTER §2 (.pp-search-open-default
force-show) so it wins by source order at equal specificity.
Both rules use !important; source order tiebreaks.
====================================================================== */
@media (max-width: 767px) {
.pp-home-hero .pp-filters.pp-filters-collapsed .pp-filter-grid,
.pp-home-hero .pp-filters.pp-filters-collapsed .pp-filter-actions,
.pp-home-hero .pp-filters.pp-filters-collapsed .pp-active-filters {
display: none !important;
}
}
/* ======================================================================
§12. v4.20.2 W2 — /tournaments/ multi-column filter grid restoration
Problem: pp-v4-19-fixes.css §20 contains
.pp-filters.pp-filters-collapsed > .pp-filter-grid { display: revert !important; }
which reverts the .pp-filter-grid CSS Grid display to block, stacking
the 14 filter fields in a single column on /tournaments/ desktop.
pokerpath.js:109 adds .pp-filters-collapsed unconditionally on every
page load, so the §20 override always fires. The homepage's
[pp_search_open] wrapper has its own escape hatch via .pp-search-open-default;
/tournaments/ had no equivalent.
Fix: when [pp_search] renders on a non-homepage page, the PHP renderer
adds the .pp-filters-tournaments-page class to .pp-filters. The rule
below uses higher specificity (3 classes vs §20's 2) AND !important
to win the cascade regardless of source-file load order:
§20: .pp-filters.pp-filters-collapsed > .pp-filter-grid (0,2,1) !important
§12: .pp-filters.pp-filters-tournaments-page.pp-filters-collapsed > .pp-filter-grid (0,3,1) !important
====================================================================== */
.pp-filters.pp-filters-tournaments-page.pp-filters-collapsed > .pp-filter-grid,
.pp-filters.pp-filters-tournaments-page > .pp-filter-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
gap: 12px !important;
}
/* ======================================================================
§13. v4.20.2 W3 — Mobile filter pattern (primary visible, secondary
collapsed behind "More filters" toggle)
Desktop: all 14 fields visible (W2 grid above keeps them all in view).
Mobile (<768px): only the 3 primary filters (Region, State, Game Type)
are visible until the user clicks the "+ More filters" toggle, which
adds .pp-filters-show-more to .pp-filters and reveals the secondary
group.
The "+ More filters" toggle button is itself hidden on desktop and
visible on mobile.
The .pp-mobile-filter-toggle (legacy collapsed-state toggle from
pre-v4.19.8) stays hidden by pp-v4-19-fixes.css §8 — that rule is
untouched here.
====================================================================== */
/* Desktop: hide the W3 More-filters toggle button */
.pp-more-filters-toggle {
display: none;
}
@media (max-width: 768px) {
/* Mobile: show the W3 toggle button as a clear, primary-style action */
.pp-tournaments-filter-form .pp-more-filters-toggle,
.pp-tour-filters-form .pp-more-filters-toggle {
display: block;
width: 100%;
margin: 8px 0 12px;
padding: 10px 16px;
min-height: 44px;
font-size: 14px;
font-weight: 500;
color: var(--pp-primary, #1f7a3a);
background: transparent;
border: 1px solid var(--pp-gray-200, #e5e7eb);
border-radius: var(--pp-radius-md, 8px);
cursor: pointer;
text-align: center;
}
.pp-tournaments-filter-form .pp-more-filters-toggle:hover,
.pp-tour-filters-form .pp-more-filters-toggle:hover {
background: var(--pp-gray-50, #f9fafb);
}
/* Mobile: hide secondary filters by default. Force-hide overrides
pp-v4-19-fixes.css §20's force-show — §20 targets direct children
of .pp-filters (.pp-filter-grid etc.); this rule targets
grandchildren (.pp-filter-group-secondary), so §20 doesn't conflict. */
.pp-tournaments-filter-form .pp-filter-group-secondary,
.pp-tour-filters-form .pp-filter-group-secondary {
display: none !important;
}
/* Mobile: when .pp-filters-show-more is present (toggled on by JS),
reveal the secondary fields. */
.pp-tournaments-filter-form .pp-filters.pp-filters-show-more .pp-filter-group-secondary,
.pp-tour-filters-form .pp-filters.pp-filters-show-more .pp-filter-group-secondary {
display: block !important;
}
}
/* ======================================================================
§14. v4.20.2-r3 Fix 1 — Filter grid visibility (cascade-independent)
v4.20.2-r4 — Selector tightened to body.page-id-208 (Tournaments page only).
v4.20.3 Fix 2 — Selector chain corrected to match the actual renderer-emitted
DOM structure. The previous chain
.pp-search-wrap > .pp-filters > .pp-filter-grid
used direct-child combinators, but the renderer (verified
against includes/class-pp-shortcodes.php lines 205-352) emits
The