/* ==========================================================================
   LSANinja.com brand overrides
   Layered on top of qa-styles.css (SnowFlat base). Loaded after it so these
   rules win on equal specificity. Palette/fonts/radius tokens sourced from
   https://lsaninja.com/brand-guidelines.html.

   2026-08-20 update ("Candidate B"): reintroduced the brand's layered dark
   surfaces + softened text tone that the original flat 3-color pass had
   collapsed to single hexes -- flat navy/white/orange at full saturation
   read as glaring for long-form reading. Also fixes the "invisible answer
   text" bug: user-pasted answer content carries hardcoded inline
   color:#000000 spans (Word/Docs/ChatGPT paste artifacts, confirmed on 937
   of 5,184 posts via direct DB query) which any theme-only palette change
   can't reach since inline styles win -- the .qa-post-content override rule
   below forces readable text regardless of what's pasted into stored
   content.
   ========================================================================== */

:root {
	/* Layered dark surfaces, darkest to lightest -- was previously one flat
	   hex (#0d1b2a) reused for all five roles. */
	--bg:        #070f16;  /* page canvas */
	--bg-deep:   #111f2e;  /* chrome: topbar, footer, nav-item boxes, page-title bar, sidebar welcome box, logo box */
	--bg-card:   #162032;  /* cards: question/answer list items, answer content wrapper, sidebar modules, inputs */
	--bg-mid:    #1a2332;  /* hover/active feedback, one step lighter than card */
	--bg-subtle: #1e2d3d;  /* lightest surface -- tag pill background, most-elevated elements */

	/* Text -- was pure white/pure white for everything; softened primary +
	   a real muted tone for secondary/meta text. */
	--ink:       #e2e6ec;  /* primary body/heading text -- 13.0:1 on --bg-card, still AAA but not glaring */
	--muted:     #8d9fab;  /* secondary/meta text: dates, points, view counts -- 5.8-6.1:1, passes AA */
	--subtle:    #556070;  /* NON-TEXT use only (dividers, decorative) -- only 2.6:1, fails AA for text */
	--line:      #4e6478;  /* borders */

	/* Accent -- resting state stays the darker orange (user explicitly
	   rejected the brighter f97316 as "too bright" for resting use during
	   the original theme build); f97316 is now used correctly as the
	   *hover* feedback color instead of being flattened away. */
	--accent:    #ea580c;
	--accent-dk: #f97316;

	/* New: real semantic colors for vote arrows only (Candidate B) -- the
	   rest of the UI stays single-accent, this doesn't reverse that
	   decision site-wide. */
	--ok:        #10b981;
	--warn:      #f59e0b;
	--error:     #ef4444;

	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   16px;
	--radius-full: 9999px;
}

body {
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--ink);
	background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Space Grotesk', -apple-system, sans-serif;
	color: var(--ink);
}

/* Body copy / muted text areas use the brand's muted tone rather than pure white */
.qa-q-view-content, .qa-a-item-content, .qa-c-item-content,
.qa-part-title, .qa-page-title-text {
	color: var(--ink);
}

/* ---------------------------------------------------------------------
   BUG FIX: pasted answer/question content carries hardcoded inline
   color:#000000 (and similar) from Word/Docs/ChatGPT paste. Force
   readable text color regardless of what's baked into stored content.
   Scoped to post-content wrappers only, so nothing outside real Q&A body
   text is affected. Links keep their own accent color (excluded via
   :not(a)) rather than being forced to --ink.
   --------------------------------------------------------------------- */
.qa-post-content, .qa-post-content *:not(a),
.qa-q-view-content, .qa-q-view-content *:not(a) {
	color: var(--ink) !important;
	background-color: transparent !important;
}
.qa-post-content a, .qa-q-view-content a {
	color: var(--accent) !important;
}

/* Cards / panels */
.qa-main-list, .qa-q-list-item, .qa-q-view, .qa-a-list-item,
.qa-sidebar-module, .qa-sidebar {
	background: var(--bg-card);
	border-color: var(--line);
	border-radius: var(--radius-lg);
}

/* Links */
a:link, a:visited {
	color: var(--accent);
}
a:active, a:focus, a:hover {
	color: var(--accent-dk);
}
/* The base theme correctly sets white links inside colored notice/error/warning/success
   boxes (readable against red/yellow/green) - the blanket accent-color link rule above
   has equal CSS specificity and, loading later, was winning and turning those links
   orange-on-red (low contrast). Restore the base theme's intent explicitly here. */
.qa-error a, .qa-warning a, .qa-notice a, .qa-success a {
	color: #fff;
}
.qa-error a:hover, .qa-warning a:hover, .qa-notice a:hover, .qa-success a:hover {
	color: #fff;
}
.qa-q-item-title a {
	color: var(--ink);
}
.qa-q-item-title a:hover, .qa-q-item-title a:active, .qa-q-item-title a:focus,
.qa-page-links-item a:hover, .qa-page-links-item a:focus,
.qa-page-selected a:hover {
	color: var(--accent);
}

/* Page title bar (e.g. "Ask a Question", question titles) */
.qa-main-heading {
	background: var(--bg-deep);
	color: #fff;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* NOTE: the global h1-h6 color rule above is already white, but SnowFlat's
   base stylesheet sets some heading-bar text to a dark color directly -
   restore white explicitly here to avoid an invisible-text regression
   (same issue the celebrityclasses.in theme had to patch for). */
.qa-main-heading h1, .qa-main-heading h2, .qa-main-heading h3,
.qa-main-heading h1 a,
.qa-main-heading h1 a:hover,
.qa-main-heading h1 a:focus,
.qa-main-heading h1 a:visited {
	color: #fff;
}

/* "Help get things started" / suggestion tip box */
.qa-suggest-next {
	background: var(--bg-deep);
}

/* Nav menu item boxes (Questions/Unanswered/Tags/Users), login button, and its
   dropdown popup - these all used the base theme's slate color (#34495e). */
.qa-nav-main-link,
#qam-account-toggle,
.qam-account-items {
	background-color: var(--bg-deep);
}
.qa-nav-main-link:hover,
#qam-account-toggle:hover {
	background: var(--bg-mid);
}
.qa-nav-main-ask .qa-nav-main-link,
.qa-nav-main-ask .qa-nav-main-link.qa-nav-main-selected {
	color: var(--accent);
}

/* Sidebar "Welcome to..." box - was the same slate color */
.qa-sidebar.wet-asphalt {
	background: var(--bg-deep);
}

/* Nav highlight - subtle treatment (bg tint + accent underline/text), NOT a full solid
   accent fill. A large bright-orange bar reads as too intense against the dark theme;
   accent should read as a precise highlight, not a block of color. */
.qa-nav-main-link.qa-nav-main-selected {
	background: var(--bg-mid);
	color: var(--accent);
	box-shadow: inset 0 -3px 0 0 var(--accent);
}
.qa-nav-sub-link.qa-nav-sub-selected, .qa-nav-sub-link:visited.qa-nav-sub-selected, .qa-nav-sub-link:hover.qa-nav-sub-selected {
	background: var(--bg-mid);
	color: var(--accent);
	box-shadow: inset 0 -3px 0 0 var(--accent);
}
/* Pagination "current page" number stays a small solid accent chip - appropriate scale for
   a bold CTA-like treatment, unlike the large nav bars above. */
.qa-page-selected {
	background: var(--accent);
}
.qa-a-count {
	background-color: var(--bg-deep);
}
.qa-form-tall-help, .qa-form-wide-help {
	background-color: var(--accent);
}

/* Top navigation bar */
.qam-main-nav-wrapper {
	background: var(--bg-deep);
	color: var(--ink);
}
.qam-main-nav-wrapper a {
	color: #fff;
}
.qa-nav-main a:hover,
.qa-nav-main .qa-nav-selected a {
	color: var(--accent) !important;
}

/* Logo */
.qa-logo {
	font-size: inherit;
}
@media (min-width: 980px) {
	.qa-logo-link {
		background: var(--bg-deep);
		padding: 8px 18px;
		border-radius: var(--radius-md);
	}
	.qa-logo-link:hover {
		background: var(--bg-mid);
	}
}

/* Search widget - was "turquoise" flat-color (later a full-bleed orange fill, which read
   as too bright/heavy for a search box). Subdued now: dark field with an accent border,
   the search button itself carries the one touch of accent color. */
.qam-search.turquoise .qa-search {
	background: var(--bg-card);
	border: 1px solid var(--accent);
	border-radius: var(--radius-md);
}
.qam-search.turquoise .qa-search-field {
	background: transparent;
	color: var(--ink);
	border: none;
}
.qam-search.turquoise .qa-search-field:focus {
	border-color: var(--accent-dk);
}
.qam-search.turquoise .qa-search-button {
	background-color: var(--accent);
}
/* Base theme also uses "turquoise" (#1abc9c, off-brand) for a sidebar widget variant -
   not confirmed in active use on any current page, but fixed defensively so no
   off-brand color can surface if a plugin/widget ever renders it. */
.qa-sidebar.turquoise {
	background: var(--bg-mid);
}
/* 2026-08-20: removed per explicit feedback - full-width orange "Ask a Question" bar
   at the top of every mobile page was "very annoying." Mobile users can still ask a
   question via the header nav menu; this only hides the redundant standalone CTA bar. */
@media (max-width: 979px) {
	.qam-ask-mobile {
		display: none !important;
	}
	.qam-search-mobile.turquoise {
		background-color: var(--bg-card);
		border: 1px solid var(--accent);
		border-left-color: var(--accent);
	}
	.qam-search-mobile.turquoise.active {
		background-color: var(--bg-mid);
	}
}

/* Buttons */
.qa-form-tall-button, .qa-form-wide-button, .qa-form-basic-button {
	background: var(--accent) none;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	border-radius: var(--radius-md);
}
.qa-form-tall-button:hover, .qa-form-tall-button:focus,
.qa-form-wide-button:hover, .qa-form-wide-button:focus,
.qa-form-basic-button:hover, .qa-form-basic-button:focus {
	background-color: var(--accent-dk);
}
.qa-form-tall-button a, .qa-form-tall-button a:hover,
.qa-form-wide-button a, .qa-form-wide-button a:hover,
.qa-form-basic-button a, .qa-form-basic-button a:hover {
	color: #fff;
}
.qa-form-tall-button-save, .qa-form-wide-button-save, .qa-form-wide-button-saverecalc,
.qa-form-tall-button-ask, .qa-form-tall-button-answer {
	background: var(--bg-deep) none;
}
.qa-form-tall-button-save:hover, .qa-form-tall-button-save:focus,
.qa-form-wide-button-save:hover, .qa-form-wide-button-save:focus,
.qa-form-tall-button-ask:hover, .qa-form-tall-button-ask:focus,
.qa-form-tall-button-answer:hover, .qa-form-tall-button-answer:focus {
	background-color: var(--bg-mid);
}

/* Inputs */
.qa-form-tall-text, .qa-form-wide-text, textarea {
	background: var(--bg-card);
	border-color: var(--line);
	color: var(--ink);
	border-radius: var(--radius-sm);
}

/* Selected answer accent */
.qa-a-selected {
	border-color: var(--accent) !important;
}

/* Category / tag pills - moved from --bg-mid to --bg-subtle (lightest surface) now that
   there are more distinct layers to pick from, so pills read as elevated chips rather
   than blending into the hover-state tone. */
.qa-post-tag-item, .qa-tag-item {
	color: var(--ink);
	background: var(--bg-subtle);
	border-radius: var(--radius-full);
}

/* Vote/points counts and misc badges */
.qa-vote-count, .qa-a-count {
	border-radius: var(--radius-sm);
}
/* Vote arrows - Candidate B reintroduces real green/red here specifically (the one place
   on this site color-coding a state is genuinely useful for scanning), while every other
   UI element stays single-accent. */
.qa-vote-up-button, .qa-voted-up .qa-vote-count {
	color: var(--ok);
}
.qa-vote-down-button, .qa-voted-down .qa-vote-count {
	color: var(--error);
}

/* Footer back-link to main site */
.qam-lsa-backlink {
	background: var(--bg-deep);
	color: #fff;
	text-align: center;
	padding: 12px;
	font-family: 'Inter', sans-serif;
	font-size: 0.85em;
}
.qam-lsa-backlink a {
	color: var(--accent);
	font-weight: 700;
}
.qam-lsa-backlink a:hover {
	color: #fff;
	text-decoration: underline;
}

/* NOTE: an earlier version of this file forced dark text specifically for the "Ask a
   Question" nav item's selected state, to work around the selected-nav-highlight rule
   painting a solid orange background (which collided with this item's own orange text).
   That's no longer needed - the selected-nav-highlight treatment above now uses a subtle
   dark background + accent underline instead of a full orange fill, so the collision no
   longer exists. */

/* Mobile sub-nav (Recent/Hot!/Most votes/etc, and the User profile tab strip) - the base
   theme lays these out as a 3-column floating grid with light-gray inset box-shadow
   borders, which wraps awkwardly and reads as cramped/boxy. Replaced with a single-row,
   horizontally-scrollable tab strip - a cleaner, more standard mobile pattern. */
@media (max-width: 979px) {
	.qa-nav-sub-list {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		scrollbar-width: none;
	}
	.qa-nav-sub-list::-webkit-scrollbar {
		display: none;
	}
	.qa-nav-sub-item {
		width: auto;
		flex: 0 0 auto;
		float: none;
		box-shadow: none;
		border-right: 1px solid var(--line);
	}
	.qa-nav-sub-item:last-child {
		border-right: none;
	}
	.qa-nav-sub-link {
		padding: 10px 14px;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------
   Second verification pass (2026-08-20): found via live screenshot + a
   computed-style scan for every element still rendering solid #ea580c,
   which the first pass missed because none of these are covered by the
   selectors already in this file - they're separate base-theme rules,
   several using !important, that needed their own overrides.
   --------------------------------------------------------------------- */

/* Tag pills everywhere (question lists, question detail, sidebar tag cloud on a single
   question) - base theme hardcodes background:#ea580c; color:#fff!important on
   .qa-tag-link, so this needs !important too to actually win. */
.qa-tag-link,
.qa-widget-side .qa-q-view-tag-item {
	background: var(--bg-subtle) !important;
	color: var(--accent) !important;
}
.qa-tag-link:hover,
.qa-widget-side .qa-q-view-tag-item:hover {
	background: var(--bg-mid) !important;
}

/* "1 Answer" / "N Answers" section heading - actually styled by the ID selector
   #a_list_title (higher specificity than any class rule, confirmed via a live computed-
   style + matched-rules check - a plain ".qa-widget-main h2:first-of-type" override was
   not enough to beat it). Same "accent as highlight, not a block of color" treatment as
   the rest of this file. */
#a_list_title, .qa-widget-main h2:first-of-type {
	background: var(--bg-deep) !important;
	color: var(--accent) !important;
}
#a_list_title a, .qa-widget-main h2:first-of-type a {
	color: var(--accent) !important;
	border-bottom-color: var(--accent);
}
#a_list_title a:hover, .qa-widget-main h2:first-of-type a:hover {
	color: #fff !important;
}

/* Top-scoring-users page: username + score pills were solid orange/white. Username as a
   plain card chip, score (the number that actually matters) keeps the accent so it's
   still the thing the eye lands on - just not a wall of orange down the whole list. */
.qa-top-users-label .qa-user-link {
	background-color: var(--bg-card);
	color: var(--ink);
}
.qa-top-users-label .qa-user-link:hover,
.qa-top-users-label .qa-user-link:focus {
	background-color: var(--bg-mid);
}
.qa-top-users-score {
	background-color: var(--bg-subtle);
	color: var(--accent);
}
/* Username pill's connector triangle (CSS border-trick) was colored to match the old
   orange pill so it blended in seamlessly - now needs to match the new dark pill
   background instead, or it reads as a stray orange arrow. */
@media (min-width: 980px) {
	.qa-top-users-label .qa-user-link:after {
		border-left-color: var(--bg-card);
	}
}
/* The coin-icon glyph before the score number has its own separate solid-orange
   background box (base theme), independent of .qa-top-users-score's own background -
   blended fine against the old orange-on-orange pill, but stood out as a jarring bright
   square once the pill itself went dark. Blend it into the new pill instead of leaving
   it orange. */
.qa-ranking-users-points .qa-top-users-score:before {
	background-color: var(--bg-mid);
	color: var(--accent);
}

/* Category browse tiles - not confirmed in active use on any current page, fixed
   defensively so no off-brand/loud fill can surface if this view is ever reachable. */
.qa-browse-cat-link, .qa-browse-cat-link:hover, .qa-browse-cat-link:visited {
	background-color: var(--bg-card);
	color: var(--ink);
}
.qa-browse-cat-note a {
	background-color: var(--bg-subtle);
	color: var(--accent);
}

/* ---------------------------------------------------------------------
   Frequency-weighted tag coloring (2026-08-20 follow-up): the tag-cloud widget
   (qa-plugin/tag-cloud-widget/qa-tag-cloud.php) and the /tags grid page
   (qa-include/pages/tags.php) both now emit a qa-tag-cloud-{hot,warm,cool} /
   qa-tag-grid-{hot,warm,cool} wrapper class based on each tag's count relative to
   the site's single most popular tag. Only the color assignment lives here -
   PHP owns the tiering logic, CSS owns what each tier looks like.
   --------------------------------------------------------------------- */

/* Sidebar tag cloud - bare links (no pill background), sized already by the widget's
   own font-size scaling; color now scales alongside size instead of every tag,
   popular or obscure, painting the same solid accent. */
.qa-tag-cloud-hot {
	color: var(--accent);
	font-weight: 700;
}
.qa-tag-cloud-warm {
	color: var(--accent);
	opacity: 0.82;
}
.qa-tag-cloud-cool {
	color: var(--muted);
}

/* /tags grid page - pills, so vary both the pill fill and text weight/color across tiers. */
.qa-tag-grid-hot .qa-tag-link {
	background: var(--bg-subtle) !important;
	color: var(--accent) !important;
	font-weight: 700;
}
.qa-tag-grid-warm .qa-tag-link {
	background: var(--bg-mid) !important;
	color: var(--accent) !important;
}
.qa-tag-grid-cool .qa-tag-link {
	background: var(--bg-mid) !important;
	color: var(--muted) !important;
}

/* ---------------------------------------------------------------------
   "Select as best answer" button (2026-08-20, found while reviewing as a logged-in
   user): base theme's icon (qa-theme/LSANinja/images/answer-select.png) is a pure
   white checkmark with transparent padding - confirmed by inspecting the actual PNG
   pixel data, not guessed - meant to sit on a colored background. Base theme's resting
   state is background-color:#ffffff, so a white checkmark on a white button is
   invisible until you hover (which swaps to orange). Give it a visible resting state so
   the button doesn't require a hover to discover it exists at all.
   --------------------------------------------------------------------- */
/* No visible button box at all. First attempt used the existing white checkmark PNG
   as a CSS mask (mask-image) with background-color supplying the tint - didn't render
   correctly on this element (a plain <input type="submit">, a replaced form control;
   mask-image support on replaced elements is unreliable across engines, confirmed via
   a high-res crop showing the mask wasn't clipping as expected). Switched to a
   self-contained inline SVG checkmark instead, with the color baked directly into
   the SVG per state via background-image - same delivery mechanism (background-image)
   already proven to work on this element by the original design, just recolored. */
.qa-a-select-button, .qa-a-unselect-button, .qa-a-selected {
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 28px 28px !important;
}
.qa-a-select-button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.qa-a-select-button:hover, .qa-a-select-button:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.qa-a-unselect-button, .qa-a-selected {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.qa-a-unselect-button:hover, .qa-a-unselect-button:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------------------
   CKEditor (Ask/Answer rich text editor) dark theme, 2026-08-20. The editing
   AREA is a separate iframe document (styled via
   qa-plugin/wysiwyg-editor/ckeditor/contents-custom.css instead, since this
   stylesheet can't reach inside it) - this section is only the toolbar/chrome,
   which lives in the main page DOM and CAN be styled from here. Selectors are
   the standard CKEditor 4 "moono-lisa" skin class names.
   --------------------------------------------------------------------- */
.cke_chrome {
	background: var(--bg-card) !important;
	border-color: var(--line) !important;
}
.cke_inner {
	background: var(--bg-card) !important;
}
.cke_top {
	background: var(--bg-deep) !important;
	border-bottom-color: var(--line) !important;
}
.cke_bottom {
	background: var(--bg-deep) !important;
	border-top-color: var(--line) !important;
}
.cke_toolbar_separator {
	background-color: var(--line) !important;
}
/* Default icon sprites are dark line-art meant for a light toolbar - invert so they
   read against the dark chrome instead of swapping the whole icon spritesheet. */
.cke_button_icon {
	filter: invert(1) brightness(1.8);
}
.cke_button_label {
	color: var(--ink) !important;
}
.cke_button:hover, .cke_button:focus, .cke_button_on {
	background: var(--bg-mid) !important;
	border-color: var(--accent) !important;
}
.cke_combo_button {
	background: var(--bg-card) !important;
	border-color: var(--line) !important;
}
.cke_combo_text {
	color: var(--ink) !important;
}
.cke_combo_arrow {
	border-top-color: var(--muted) !important;
}
.cke_path_item {
	color: var(--muted) !important;
}
.cke_path_item:hover, .cke_path_item:focus {
	color: var(--accent) !important;
}
.cke_resizer {
	border-color: var(--line) transparent transparent !important;
}

/* Bug fix: mobile "Ask a Question" button text was invisible (orange-on-orange) - the
   global a:link accent-color rule was applying to this link's text, while its own
   .turquoise->accent background rule (above) painted the same orange behind it. This is
   the large, prominent button at the top of every mobile page, so this was likely the
   single biggest contributor to the site feeling "too bright"/hard to read on mobile. */
.qam-ask-mobile a.turquoise {
	color: var(--bg-deep);
	font-weight: 700;
}