/* ========================================================================= ACCESSIBILITY CSS – Shoval Haifa Font increase / decrease support for the "Ally" (pojo-accessibility) plugin, legacy toolbar mode. HOW THE PLUGIN WORKS -------------------- app.min.js keeps a counter that starts at 120 (= normal size) and moves in steps of 10 between 120 and 200. Every time the value is above 120 it puts a class on the : pojo-a11y-resize-font-130 ... pojo-a11y-resize-font-200 "A+" adds 10, "A-" removes 10, and at 120 no class is left on the body, which is how the decrease button returns the site to its normal size. There is no class below 130, so decreasing never goes under 100%. WHY THIS FILE IS NEEDED ----------------------- The plugin stylesheet applies "font-size: 130%..200% !important" to a fixed list of tags (p, li, span, label, input, select, h1-h6 ...). On this theme that causes three problems: 1. Percentages are relative to the PARENT, so a span inside a li inside a p is multiplied three times (200% x 200% x 200% = 8x). 2. Tags the plugin does not list - a, button, td, th, .btn, .nav-link - never grow, so the menu, the search buttons and the price table stay small while the rest of the page explodes. 3. Every p/li/span is forced to the same size, so the theme's typographic hierarchy (18px body text vs 44px headings) is flattened. WHAT THIS FILE DOES ------------------- Each body class is translated into one variable, --a11y-font-scale, and the theme's real font sizes are re-declared multiplied by that variable. Every element therefore keeps its designed proportion and grows exactly once, and px line-heights are re-declared as ratios so they grow with the text. Rules are prefixed with "html body[class*=...]" so they always outrank the plugin's own !important declarations, whatever order the stylesheets load. THE TOOLBAR ----------- Section 0 pins the size of the menu item labels, and section 7 scales the panel itself. The plugin ships a fixed 180px box parked at left:-180px with the round toggle sitting at left:180px, so if only the text grew the labels would wrap onto two and three lines inside an unchanged popup. The width and both offsets therefore follow the same factor as the text. Structure: 0. Toolbar menu item labels 1. Scale steps 2. Neutralise the plugin's compounding rules 3. Base + headings 4. Theme font sizes x scale (mirrors assets/css/style.css) 5. Responsive font sizes x scale (mirrors assets/css/responsive.css) 6. Layout protection at large sizes 7. Toolbar panel width x scale ========================================================================= */ /* ========================================================================= 0. TOOLBAR MENU ITEM LABELS The plugin sizes the item links at 80% (12.8px), but the theme's global "span" rule in style.css (".fils-for-downlaod a, span { font-size: 16px }") reaches inside the widget and pushes every label back up to 16px, so the menu reads as large as the body text around it. The label span is pinned to 13px so the list sits clearly below the 18px "כלי נגישות" title. Only .pojo-a11y-toolbar-text is touched. The icon span keeps its 16px, because the icons are