/* * Progressive enhancement for the FAQ and accordion blocks. * Added 25 Aug 2026 (Batch 0, task 10). Loaded last in on every * captured document, so it overrides the theme bundle by cascade order. * * WHAT WAS WRONG * * The WordPress theme hid content by default and revealed it with JavaScript: * * .faq-item .collapse { display: none } -> FAQ answers invisible * .accordion-content { max-height: 0 } -> panels clipped to nothing * * With scripting off the text was in the HTML but unreadable: 456 words of FAQ * answers on /betting/ig-markets/, 317 on /betting/platforms/beginners/, and * about 1,040 more in six collapsed accordion panels on that same page. * `display:none` answers are also a documented risk for FAQ rich results. * * THE FLIP * * Open is now the default, in CSS, with no script involved. The companion file * progressive-enhancement.js collapses the panels on load and owns the toggling * from there. A reader without JavaScript sees everything; a reader with it gets * the same accordion behaviour as before. */ /* --- FAQ answers ------------------------------------------------------------ * The theme's jQuery handler animates with slideUp/slideDown, which writes an * inline display. Inline styles beat this rule, so the handler keeps working * from whatever state the JS sets on load. No !important needed or wanted. */ .faq-item .collapse { display: block; } /* --- Accordion panels ------------------------------------------------------- * Default open. `data-collapsed` is the only closed state, set by the JS, so * the closed look never depends on a class the theme might also be toggling. */ .accordion-content { max-height: none; } .accordion-content[data-collapsed='true'] { max-height: 0 !important; overflow: hidden !important; } /* The theme closes an open-by-default panel through * .accordion-title.accordion-show.active + .accordion-content { max-height: 0 !important } * which would fight the JS the moment `active` is toggled. Neutralised here for * panels the JS considers open; the theme's rule still applies to nothing else. */ .accordion-title.accordion-show.active + .accordion-content:not([data-collapsed='true']) { max-height: none !important; }