/* * Pluseo — FAQ accordion styles. * Loaded only on single posts that have FAQ data — see AISCP_Schema::enqueue_faq_styles. * Pure CSS; relies on the native
/ toggle (no JS). * * If this stylesheet is removed (plugin uninstalled), the FAQ markup falls * back to the browser's default disclosure UI — Q&As remain expandable and * legible. Intentional, per the "deletion-safe" requirement. */ .aiscp-faq { margin: 2.5em 0; font-family: inherit; } .aiscp-faq-title { font-size: 1.5em; line-height: 1.3; margin: 0 0 1em 0; padding: 0; } .aiscp-faq-item { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 10px; background: #ffffff; overflow: hidden; } .aiscp-faq-item:last-child { margin-bottom: 0; } .aiscp-faq-item > summary { cursor: pointer; display: block; padding: 16px 52px 16px 20px; font-weight: 600; font-size: 1.05em; line-height: 1.4; color: #111827; position: relative; user-select: none; outline: none; transition: background-color 0.15s ease; } .aiscp-faq-item > summary:hover { background-color: #f9fafb; } .aiscp-faq-item > summary:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; } /* Suppress the browser's default disclosure triangle so our custom +/- is the only visible affordance. The two selectors cover all browsers. */ .aiscp-faq-item > summary::-webkit-details-marker { display: none; } .aiscp-faq-item > summary::marker { content: ""; } /* Custom +/- toggle indicator. Absolute-positioned in the gutter we reserved via summary's right padding. Switches glyph based on details[open] — pure CSS, no JS, no flicker. */ .aiscp-faq-item > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: 300; line-height: 1; color: #6b7280; border-radius: 50%; background-color: #f3f4f6; transition: background-color 0.15s ease, color 0.15s ease; } .aiscp-faq-item[open] > summary::after { content: "−"; /* Minus sign U+2212 — better-aligned than hyphen */ background-color: #dbeafe; color: #1d4ed8; } .aiscp-faq-item > summary:hover::after { background-color: #e5e7eb; } .aiscp-faq-answer { padding: 0 20px 18px 20px; color: #374151; line-height: 1.65; font-size: 1em; } .aiscp-faq-answer p:first-child { margin-top: 0; } .aiscp-faq-answer p:last-child { margin-bottom: 0; } /* RTL: flip the +/- gutter and the heading alignment. Most Hebrew/Arabic themes set dir="rtl" on ; we react to that without forcing direction ourselves so the parent theme stays in charge. */ [dir="rtl"] .aiscp-faq-item > summary { padding: 16px 20px 16px 52px; } [dir="rtl"] .aiscp-faq-item > summary::after { right: auto; left: 18px; }