/* Dynamic CMS - Default Styles */ /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* iOS Safari auto-zoom prevention. iOS/iPadOS zoom the viewport on focus of any input/textarea/select/contenteditable whose font-size is under 16px, causing layout jumps on every puzzle and form field. Pinning the minimum to 16px globally kills the zoom. Applies on every device — you can't tell from CSS alone whether a user is on iPad portrait, iPad landscape, Safari on Mac, or a phone, and 16px is the right default for readable inputs regardless. For a visually smaller input, use `transform: scale()` rather than reducing font-size below 16px. */ input:not([type="hidden"]), textarea, select, [contenteditable="true"], [contenteditable=""] { font-size: 16px; } :root { /* Brand */ --primary-color: #2563eb; --secondary-color: #1e40af; /* Surfaces */ --background: #ffffff; --background-alt: #f9fafb; --card-bg: #ffffff; --card-hover-bg: #f9fafb; --header-bg: #ffffff; --footer-bg: #f9fafb; --overlay-bg: rgba(17, 24, 39, 0.55); /* Text */ --text-color: #1f2937; --text-light: #6b7280; --text-muted: #9ca3af; /* Structural */ --border-color: #e5e7eb; --border-strong: #d1d5db; --code-bg: #f3f4f6; /* Effects */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1); /* Layout */ --max-width: 1200px; --spacing: 1rem; color-scheme: light; } /* Dark theme — applied by public/js/theme.js based on user choice, or synchronously by the no-FOUC snippet in for auto-mode. All color tokens flip together; hardcoded colors inside components get their own overrides lower down. */ [data-theme="dark"] { --primary-color: #60a5fa; --secondary-color: #93c5fd; --background: #0f172a; --background-alt: #1e293b; --card-bg: #1e293b; --card-hover-bg: #273449; --header-bg: #0f172a; --footer-bg: #0b1220; --overlay-bg: rgba(0, 0, 0, 0.6); --text-color: #f1f5f9; --text-light: #cbd5e1; --text-muted: #94a3b8; --border-color: #334155; --border-strong: #475569; --code-bg: #273449; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5); color-scheme: dark; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--text-color); background: var(--background); } /* Container */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); } /* Typography */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin-bottom: 1rem; font-weight: 600; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } p { margin-bottom: 1rem; } a { color: var(--primary-color); text-decoration: none; transition: color 150ms ease, text-decoration-color 150ms ease; } a:hover { color: var(--secondary-color, #1d4ed8); text-decoration: none; } /* Header */ .site-header { background: var(--header-bg); border-bottom: 1px solid var(--border-color); padding: 1.5rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); transition: padding 200ms ease, box-shadow 200ms ease, background-color 200ms ease; } /* Compact state — applied by JS when the page has scrolled past a threshold. Shrinks vertical padding, scales the logo down, and hides the large site name so the menu bar takes minimum vertical space. */ .site-header.is-scrolled { padding: 0.4rem 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .site-header.is-scrolled .site-logo-img { height: calc(var(--logo-h, 40px) * 0.7); } .site-header.is-scrolled .site-name { font-size: 1rem; } .site-header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } /* Header layout — two rows on desktop so the search sits on the SAME horizontal line as the logo (not next to the nav menu links), and a single row on mobile with logo / search / hamburger left-to-right (hamburger always rightmost for thumb reach). */ .site-header .site-utils { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0; } /* Desktop: row 1 = [logo] ... [search], row 2 = [nav menu items] */ @media (min-width: 768px) { .site-header .site-logo { order: 1; } .site-header .site-utils { order: 2; margin-left: auto; } /* flex: 1 0 100% forces the nav to wrap to its own row below the logo+search pair, so they visually occupy the top strip together. */ .site-header .site-nav { order: 3; flex: 1 0 100%; } } /* Mobile: one row, [logo] ... [search] [hamburger]. */ @media (max-width: 767.98px) { .site-header .container { flex-wrap: nowrap; } .site-header .site-logo { order: 1; } .site-header .site-utils { order: 2; margin-left: auto; margin-right: 6px; } .site-header .site-nav { order: 3; flex: 0 0 auto; margin-left: 0; } } .site-branding { flex: 0 0 auto; } .site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .site-logo-img { display: block; width: auto; height: var(--logo-h, 40px); will-change: height; transition: height 200ms ease; } .site-logo .site-name { font-weight: 600; font-size: 1.2rem; color: var(--text-color); transition: font-size 200ms ease; } /* ---- Quiz page nav strip (L3 Q/A pages) ---- */ .quiz-nav { display: flex; gap: 10px; margin: 0 0 18px; padding: 0; background: transparent; border: 0; align-items: stretch; flex-wrap: wrap; } .quiz-nav-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; text-decoration: none; color: var(--text-color); font-family: inherit; font-size: inherit; cursor: pointer; min-width: 0; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .quiz-nav-card:hover { border-color: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); text-decoration: none; } .quiz-nav-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .quiz-nav-card--back { flex: 1 1 220px; } .quiz-nav-card--sibling { flex: 1 1 220px; } .quiz-nav-card--sibling .quiz-nav-label { text-align: right; margin-left: auto; } .quiz-nav-card--print { flex: 0 0 auto; } .quiz-nav-icon { font-size: 1.1rem; color: #6b7280; flex: 0 0 auto; } .quiz-nav-label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; overflow: hidden; } .quiz-nav-label small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; } .quiz-nav-label strong { font-weight: 600; font-size: 0.95rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 560px) { .quiz-nav-card--back, .quiz-nav-card--sibling { flex: 1 1 100%; } .quiz-nav-card--print { flex: 1 1 100%; justify-content: center; } } /* ---- Quiz rounds list (L2 hub pages) ---- */ .quiz-rounds { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .quiz-round { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-bg); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 200ms ease; } .quiz-round:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .quiz-round-label { font-weight: 600; color: #374151; } .quiz-round-links { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; } .quiz-round-link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--card-bg); color: var(--text-color); text-decoration: none; width: 100%; min-width: 0; box-sizing: border-box; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background-color 200ms ease; } .quiz-round-link:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); text-decoration: none; } .quiz-round-link-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; } .quiz-round-link-title { font-size: 13px; font-weight: 500; } /* Left accent bar — blue for questions, amber for answers. A slightly thicker bar on hover gives a subtle affordance without losing contrast. */ .quiz-round-link { border-left-width: 3px; } .quiz-round-link--q { border-left-color: #2563eb; } .quiz-round-link--o { border-left-color: #10b981; } .quiz-round-link--a { border-left-color: #f59e0b; } .quiz-round-link--q:hover { border-left-color: #1d4ed8; border-left-width: 5px; } .quiz-round-link--o:hover { border-left-color: #059669; border-left-width: 5px; } .quiz-round-link--a:hover { border-left-color: #d97706; border-left-width: 5px; } /* Entry-mode pair (Take the quiz / Just the questions) sits in one row so readers see them as a single choice. Collapses on narrow phones. */ .quiz-round-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .quiz-round-entries > .quiz-round-link { width: 100%; } .quiz-round-entries:has(> .quiz-round-link:only-child) { grid-template-columns: 1fr; } @media (max-width: 480px) { .quiz-round-entries { grid-template-columns: 1fr; } } .site-title { margin: 0; font-size: 1.5rem; } .site-title a { color: var(--text-color); text-decoration: none; } .site-title a:hover { color: var(--primary-color); text-decoration: none; } /* Navigation */ .main-navigation { flex: 1 1 auto; display: flex; justify-content: flex-end; } .menu ul { list-style: none; display: flex; gap: 2rem; flex-wrap: wrap; } .menu li { margin: 0; } .menu a { color: var(--text-color); text-decoration: none; padding: 0.5rem 0; display: block; transition: color 0.3s; } .menu a:hover { color: var(--primary-color); text-decoration: none; } /* Main Content */ .site-main { padding: 3rem 0; /* min-height removed — the main region sizes to its content so the footer sits directly below whatever's on the page. On a short page (small crossword, 404, etc.) the footer is near the top; on a long page it's pushed down naturally. Adaptive. */ } .page-content { max-width: 800px; margin: 0 auto; } .entry-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border-color); } .entry-title { margin: 0; color: var(--text-color); } .entry-content { font-size: 1.125rem; line-height: 1.8; } .entry-content h2 { margin-top: 2rem; margin-bottom: 1rem; } .entry-content h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; } .entry-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; } .entry-content ul, .entry-content ol { margin-left: 2rem; margin-bottom: 1rem; } .entry-content li { margin-bottom: 0.5rem; } .entry-content blockquote { border-left: 4px solid var(--primary-color); padding-left: 1.5rem; margin: 1.5rem 0; font-style: italic; color: var(--text-light); } .entry-content code { background: var(--background-alt); padding: 0.2rem 0.4rem; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.9em; } .entry-content pre { background: var(--background-alt); padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; } .entry-content pre code { background: none; padding: 0; } /* Footer */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--border-color); padding: 2rem 0; margin-top: 4rem; color: var(--text-color); transition: background-color 200ms ease; } /* Three-row footer layout (desktop): Row 1 — copyright + theme toggle Row 2 — footer nav menu links (horizontal, wrapping) Row 3 — RSS subscribe + cookie preferences On mobile every row's items drop into a single centred column so nothing gets crammed. */ .site-footer .footer-columns { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } /* Row 1 — brand */ .site-footer .footer-brand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } .site-footer .footer-brand p { margin: 0; color: var(--text-light); font-size: 0.875rem; } /* Row 2 — nav menu */ .site-footer .footer-nav { width: 100%; } .site-footer .footer-nav nav[data-menu] > ul { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 0; padding: 0; list-style: none; } .site-footer .footer-nav nav[data-menu] a { color: var(--text-light); text-decoration: none; font-size: 0.875rem; } .site-footer .footer-nav nav[data-menu] a:hover { color: var(--primary-color); } /* Row 3 — controls */ .site-footer .footer-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } /* Mobile: single column, every item (including individual nav links) on its own line so the footer is one clean vertical list. */ @media (max-width: 640px) { .site-footer .footer-brand, .site-footer .footer-controls { flex-direction: column; gap: 10px; } .site-footer .footer-nav nav[data-menu] > ul { flex-direction: column; gap: 10px; align-items: center; } } .footer-navigation { margin-bottom: 1.5rem; } .footer-navigation .menu ul { justify-content: center; gap: 1.5rem; } .site-info { text-align: center; color: var(--text-light); font-size: 0.875rem; } .site-info p { margin: 0; } /* Responsive */ @media (max-width: 768px) { /* Logo left, hamburger right — stays on a single row. (Older version of this rule stacked them vertically which fought against the newer mobile header layout.) */ .site-header .container { flex-direction: row; align-items: center; flex-wrap: nowrap; } .main-navigation { margin-top: 0; } .menu ul { flex-direction: column; gap: 0.5rem; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } .entry-content { font-size: 1rem; } } @media (max-width: 480px) { .container { padding: 0 1rem; } .site-main { padding: 2rem 0; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } } /* Utility Classes */ .text-center { text-align: center; } .text-right { text-align: right; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } /* ====================================================================== Quiz layout polish — keeps content tight, no big blank gaps ====================================================================== */ /* Reduce the heroic 3rem main padding */ .site-main { padding: 1.5rem 0; } /* Categories grid on the homepage */ .categories { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .categories li.category { position: relative; /* anchors the stretched-link ::after below */ border: 1px solid var(--border-color); border-radius: 8px; padding: 14px 16px; background: var(--card-bg); transition: border-color .15s, transform .15s, box-shadow .15s, background-color 200ms ease; } .categories li.category:hover { border-color: var(--primary-color); transform: translateY(-1px); box-shadow: var(--shadow-md); } .categories li.category a { font-size: 16px; color: var(--text-color); text-decoration: none; } .categories li.category a:hover { color: var(--primary-color); } /* Stretched link — whole card is clickable via the title's . Keeps

outside the so text selection still works; the ::after covers the card and handles the click. */ .categories li.category a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .categories .category-desc { margin: 6px 0 0; color: var(--text-light); font-size: 13px; line-height: 1.4; } /* (The canonical .quiz-rounds styling lives above in the "Quiz rounds list" block — this duplicate was overriding it with an underline-on-hover.) */ /* Quiz Q & A lists */ .quiz { counter-reset: q; list-style: none; padding: 0; margin: 1rem 0 1.5rem; } .quiz > li { counter-increment: q; padding: 12px 14px 12px 48px; border-bottom: 1px solid var(--border-color, #e5e7eb); position: relative; line-height: 1.5; } .quiz > li:last-child { border-bottom: none; } .quiz > li::before { content: counter(q) "."; position: absolute; left: 14px; top: 12px; font-weight: 600; color: #2563eb; font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; } .quiz-questions > li { background: transparent; } .quiz-answers > li { background: var(--background-alt); } /* When AdSense doesn't fill (e.g. local dev), kill the empty space */ ins.adsbygoogle:empty, ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; } /* Tighten paragraph spacing inside page content */ .page-content p { margin: 0 0 0.75rem; } .page-content > h2, .page-content > h3 { margin: 1.2rem 0 0.5rem; } /* ============================================================================ Dark-theme component overrides — targeted touch-ups for rules above that still use hardcoded greys/whites. Most of the cascade already inherits the flipped CSS variables; these only exist to fix the corners that don't. ========================================================================= */ [data-theme="dark"] .quiz-nav-label small, [data-theme="dark"] .quiz-nav-icon, [data-theme="dark"] .quiz-round-label, [data-theme="dark"] .quiz-round-link-kind, [data-theme="dark"] .footer-legal, [data-theme="dark"] .page-category, [data-theme="dark"] .muted { color: var(--text-light); } [data-theme="dark"] .quiz-nav-label strong, [data-theme="dark"] .quiz-round-link-title, [data-theme="dark"] .quiz-round-link, [data-theme="dark"] .categories li.category a, [data-theme="dark"] .site-logo .site-name { color: var(--text-color); } /* Form controls + code block backgrounds */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--code-bg); color: var(--text-color); } /* ---- Theme toggle button + popover (footer) ---- */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 10px; font: inherit; font-size: 12px; color: var(--text-light); background: transparent; border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease; } .theme-toggle:hover { border-color: var(--primary-color); color: var(--text-color); background: var(--card-hover-bg); } .theme-toggle-icon { font-size: 13px; line-height: 1; } .theme-toggle-label { font-weight: 500; } .theme-popover { position: absolute; z-index: 1100; min-width: 220px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: theme-pop 140ms ease-out; } @keyframes theme-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .theme-option { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; color: var(--text-color); font: inherit; text-align: left; cursor: pointer; transition: background-color 120ms ease; } .theme-option:hover { background: var(--card-hover-bg); } .theme-option.is-active { background: var(--card-hover-bg); } .theme-option-icon { font-size: 16px; line-height: 1; } .theme-option-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .theme-option-text strong { font-size: 13px; font-weight: 600; color: var(--text-color); } .theme-option-text small { font-size: 11px; color: var(--text-light); } .theme-option-check { color: var(--primary-color); font-weight: 700; } /* Keep the print output light regardless of on-screen theme */ @media print { html[data-theme="dark"] { --background: #fff; --text-color: #000; --border-color: #999; --card-bg: #fff; } .theme-toggle, .theme-popover { display: none !important; } } /* Legacy print helpers — kept narrowly for pages that haven't migrated to the branded print view in public/css/print.css. The modern printer stylesheet does the heavy lifting now; these rules only fire when print.css isn't loaded for some reason. */ @media print { .site-header, .site-footer, .quiz-nav, .site-nav, nav[data-menu], .consent-banner, .cc-prefs-link, .share-btn, .share-overlay, ins.adsbygoogle, /* Specific ad-related classes only. The previous selector [class*="ad-"] was way too broad — it matched any class containing the substring "ad-", which accidentally included print-m_ad-_brand / logo / name / tagline / date, hiding the entire branded masthead on print. */ .ad-slot, .ad-unit, .ad-placeholder, .ad-container, [data-ad-slot] { display: none !important; } body { background: #fff !important; color: #000 !important; font-size: 12pt; } a { color: #000 !important; text-decoration: none !important; } .site-main, .container { padding: 0 !important; margin: 0 !important; max-width: none !important; } .quiz-list li { page-break-inside: avoid; margin-bottom: 8pt; } .page-title { font-size: 18pt; margin: 0 0 10pt; } } /* ================================================================ * Puzzle list sort toggle — wraps every [crossword_list], * [word_search_list] and [quiz_rounds]. Server always renders newest * first; .pe-list-reversed on the wrapper flips via CSS * flex-direction: column-reverse (pure CSS, no re-render needed). * ================================================================ */ .pe-list { margin: 12px 0 20px; } .pe-list-sort-bar { display: flex; gap: 4px; margin: 0 0 12px; justify-content: flex-end; } .pe-list-sort-btn { padding: 5px 12px; border: 1px solid var(--border, #e5e7eb); background: var(--bg, #fff); color: var(--muted, #6b7280); font: inherit; font-size: 13px; border-radius: 4px; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .pe-list-sort-btn:hover { border-color: #2563eb; color: #2563eb; } .pe-list-sort-btn[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; } /* Quiz-round type filter — sits above the sort toggle, same button language so the two bars read as one toolbar. */ .quiz-type-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; justify-content: flex-end; } .quiz-type-filter-label { font-size: 13px; color: var(--muted, #6b7280); margin-right: 4px; } .quiz-type-btn { padding: 5px 12px; border: 1px solid var(--border, #e5e7eb); background: var(--bg, #fff); color: var(--muted, #6b7280); font: inherit; font-size: 13px; border-radius: 4px; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .quiz-type-btn:hover { border-color: #2563eb; color: #2563eb; } .quiz-type-btn[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; } /* The actual list — flex column so column-reverse can flip the order */ .pe-list-items { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; list-style: none; } /* Grid-based lists (e.g. crossword-list uses grid for its cards). When that's the case, keep grid on desktop but let .pe-list-reversed flip the visual order via the order property. For the default ul layouts we use flex, so column-reverse is enough. */ .pe-list.pe-list-reversed .pe-list-items { flex-direction: column-reverse; } /* crossword-list is grid-based — override with explicit flex so the reverse toggle works. Same visual result, different layout engine. */ .crossword-list.pe-list-items { display: flex; flex-direction: column; gap: 10px; } .pe-list-date { color: var(--muted, #6b7280); font-weight: 400; white-space: nowrap; } .quiz-round-label .pe-list-date { font-size: 11px; margin-left: 2px; } /* Print — hide the toggle, restore natural sequential order */ @media print { .pe-list-sort-bar { display: none !important; } .pe-list.pe-list-reversed .pe-list-items { flex-direction: column !important; } } /* ===== Tool hub index (used by /quizzes/, /crosswords/, /sudoku/ etc.) * Card grid listing every category under one tool. Emitted by the * [quizzes_index], [crosswords_index], ... shortcodes. One set of rules * here rather than 8 per-tool duplicates. */ .pe-tool-hub { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .pe-tool-hub-item { display: block; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .pe-tool-hub-item:hover { border-color: var(--primary-color, #2563eb); transform: translateY(-1px); box-shadow: var(--shadow-md, 0 4px 10px rgba(0, 0, 0, 0.08)); } .pe-tool-hub-item > a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-decoration: none; color: inherit; } .pe-tool-hub-item > a:hover .pe-tool-hub-title { text-decoration: underline; } .pe-tool-hub-title { font-size: 16px; color: var(--primary-color, #2563eb); font-weight: 600; } .pe-tool-hub-count { font-size: 12px; color: var(--muted, #6b7280); font-weight: 400; } /* ===== Internal site search ===== */ /* Compact header input (via [search_box] shortcode) */ /* Collapsible header widget (via [search_box] shortcode). Default state is just the magnifying-glass icon; click to pop out an input that lives-searches via the JSON endpoint. */ .site-search-widget { position: relative; display: inline-block; } .site-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-color, #d1d5db); border-radius: 50%; background: var(--card-bg, #fff); color: var(--text-color, #374151); cursor: pointer; font-size: 15px; line-height: 1; transition: background 120ms ease, border-color 120ms ease; } .site-search-toggle:hover { background: var(--card-hover-bg, #f3f4f6); border-color: var(--border-strong, #9ca3af); } .site-search-widget.is-open .site-search-toggle { background: var(--card-hover-bg, #eff6ff); border-color: var(--primary-color, #2563eb); color: var(--primary-color, #2563eb); } .site-search-popout { position: absolute; top: calc(100% + 6px); right: 0; width: min(380px, calc(100vw - 24px)); background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.12)); z-index: 1100; overflow: hidden; } /* Mobile: pin the popout to the viewport edges with a small gutter. The widget can sit anywhere in the flex row; absolute-positioning it to the widget's own right edge overflows on narrow phones. Use position:fixed so the popout is screen-centred regardless. */ @media (max-width: 767.98px) { .site-search-popout { position: fixed; top: calc(var(--site-header-h, 68px) + 6px); left: 12px; right: 12px; width: auto; max-width: none; } } .site-search-form { display: flex; align-items: center; gap: 0; padding: 6px; border-bottom: 1px solid var(--border-color, #e5e7eb); } .site-search-input { flex: 1; padding: 8px 10px; border: 0; outline: none; background: transparent; font: inherit; /* 16px minimum so iOS Safari doesn't auto-zoom the viewport on focus (any smaller triggers the "make it readable" zoom which pushes the widget partly off-screen). */ font-size: 16px; color: inherit; } .site-search-submit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--text-light, #6b7280); cursor: pointer; font-size: 14px; border-radius: 4px; } .site-search-submit:hover { background: var(--card-hover-bg, #f3f4f6); color: var(--primary-color, #2563eb); } /* Live-results dropdown inside the popout. */ .site-search-live { max-height: 360px; overflow-y: auto; } .site-search-live-item { display: block; padding: 8px 12px; border-bottom: 1px solid var(--border-color, #f3f4f6); text-decoration: none; color: inherit; transition: background 100ms ease; } .site-search-live-item:last-child { border-bottom: 0; } .site-search-live-item:hover, .site-search-live-item.is-active { background: var(--card-hover-bg, #eff6ff); text-decoration: none; } .site-search-live-title { font-size: 14px; font-weight: 600; /* Theme primary — light blue in dark mode, dark blue in light mode, so the title stays readable on both backgrounds. */ color: var(--primary-color, #1a0dab); margin-bottom: 2px; } .site-search-live-snippet { font-size: 12px; line-height: 1.45; color: var(--text-light, #6b7280); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .site-search-live-snippet mark { background: #fef08a; color: #1f2937; /* pin to dark text so yellow highlight stays readable on both themes */ padding: 0 2px; border-radius: 2px; } .site-search-live-empty { padding: 14px; text-align: center; color: var(--text-light, #6b7280); font-size: 13px; font-style: italic; } /* Full search page (via [site_search] shortcode) */ .site-search { display: flex; gap: 8px; margin: 16px 0 20px; } .site-search-input-lg { flex: 1; padding: 10px 14px; border: 1px solid var(--border-color, #d1d5db); border-radius: 6px; font: inherit; font-size: 16px; /* Respect theme so the input is visible in dark mode */ background: var(--card-bg, #fff); color: var(--text-color, #1f2937); } .site-search-submit-lg { padding: 10px 20px; border: 1px solid var(--primary-color, #2563eb); border-radius: 6px; background: var(--primary-color, #2563eb); color: #fff; font-weight: 600; cursor: pointer; } .site-search-submit-lg:hover { background: var(--secondary-color, #1d4ed8); border-color: var(--secondary-color, #1d4ed8); } .site-search-note { color: var(--text-light, #6b7280); font-size: 14px; margin: 12px 0; } .site-search-summary { color: var(--text-color, #374151); font-size: 14px; margin: 12px 0; } .site-search-results { list-style: none; padding: 0; margin: 0; } .site-search-hit { padding: 14px 0; border-top: 1px solid var(--border-color, #e5e7eb); } .site-search-hit:first-child { border-top: 0; } .site-search-hit-title { display: block; font-size: 17px; font-weight: 600; /* Theme primary — light blue in dark mode, dark blue in light mode. */ color: var(--primary-color, #1a0dab); text-decoration: none; margin-bottom: 2px; } .site-search-hit-title:hover { text-decoration: underline; } .site-search-hit-path { font-size: 12px; color: var(--text-light, #6b7280); margin-bottom: 4px; } .site-search-hit-snippet { color: var(--text-color, #4b5563); font-size: 14px; line-height: 1.55; } .site-search-hit-snippet mark { background: #fef08a; color: #1f2937; padding: 0 2px; border-radius: 2px; } /* RSS subscribe link in the footer (via [rss_link] shortcode). Hides itself server-side when feeds are disabled in Admin → RSS Feeds. */ .rss-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-light, #6b7280); text-decoration: none; font-size: 13px; padding: 4px 6px; border-radius: 4px; transition: color 120ms ease, background-color 120ms ease; } .rss-link:hover { color: #ea580c; background: rgba(234, 88, 12, 0.08); text-decoration: none; } .rss-link .icon-rss { flex: 0 0 auto; }