/*
	Support.Bible brand layer
	Loaded after bootstrap + donut(.min).css — overrides their chrome.

	Design system: PlayStation DESIGN.md (getdesign.md/playstation), adapted:
	  - brand blue / red re-tuned to the Support.Bible logo (#306a9e / #b45523)
	  - light-canvas mode throughout (the spec's own support-page mode);
	    the full-bleed blue band goes to the footer
	  - PlayStation SST substituted with Inter (spec-sanctioned substitute),
	    display tier at weight 300
	Vocabulary: pill CTAs (9999px), 8px cards, 4px inputs, hairline dividers,
	no resting shadows.
*/

:root {
	/* brand (logo-derived) */
	--sb-primary: #306a9e;
	--sb-primary-pressed: #2a5d8b;
	--sb-primary-active: #21496d;
	--sb-on-primary: #ffffff;
	--sb-accent: #b45523;          /* logo red — reserved for the Ask CTA + notification bubble */
	--sb-accent-pressed: #96461d;
	--sb-link: #2a5d8b;
	--sb-link-on-dark: #9cc3e8;

	/* surfaces */
	--sb-canvas: #ffffff;
	--sb-surface-soft: #f3f3f3;
	--sb-surface-card: #f5f7fa;
	--sb-hairline: #ececec;
	--sb-rule: #dcdcdc;         /* question-list separator - deliberately darker than the hairline */

	/* text */
	--sb-ink: #121314;
	--sb-body: rgba(0, 0, 0, 0.65);
	--sb-mute: #6b6b6b;
	--sb-ash: #cccccc;
	--sb-warning: #c81b3a;
	--sb-answered: #2e7d4f;   /* answered / accepted pills in question lists */

	/* shape */
	--sb-r-sm: 4px;
	--sb-r-md: 8px;
	--sb-r-lg: 16px;
	--sb-r-pill: 9999px;

	--sb-font: 'Inter', 'Open Sans', Arial, Helvetica, sans-serif;
}

/* ---------- base typography ---------- */

body {
	font-family: var(--sb-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--sb-body);
	background-color: var(--sb-canvas);
}

h1, h2, h3, .page-title h1 {
	font-family: var(--sb-font);
	font-weight: 300;
	color: var(--sb-ink);
	line-height: 1.25;
	letter-spacing: 0.1px;
}

h4, h5, h6 {
	font-family: var(--sb-font);
	font-weight: 600;
	color: var(--sb-ink);
}

a {
	color: var(--sb-link);
}
a:hover, a:focus {
	color: var(--sb-primary-active);
}

/* ---------- primary nav (light canvas + hairline) ---------- */

.navbar,
.navbar.navbar-static-top,
.navbar.affix {
	background-color: var(--sb-canvas);
	border-bottom: 1px solid var(--sb-hairline);
	box-shadow: none;
}

.navbar a {
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--sb-ink);
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
	color: var(--sb-primary);
	background-color: transparent;
}

.navbar .navbar-nav > li.active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
	color: var(--sb-primary);
	background-color: transparent;
	box-shadow: inset 0 -2px 0 var(--sb-primary);
}

/* login button in navbar: primary pill */
.navbar-nav > li > a.navbar-login-button {
	background-color: var(--sb-primary);
	color: var(--sb-on-primary);
	border: 0;
	border-radius: var(--sb-r-pill);
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 8px 22px;
	margin-top: 8px;
	margin-bottom: 8px;
}
.navbar-nav > li > a.navbar-login-button:hover,
.navbar-nav > li > a.navbar-login-button:focus,
.navbar-nav > li > a.navbar-login-button:active {
	background-color: var(--sb-primary-pressed);
	color: var(--sb-on-primary);
}

/* notification bubble: logo red */
.nav.navbar-nav.navbar-right.notf-bubble .label,
.notf-bubble .label,
.badge {
	background-color: var(--sb-accent);
	border-radius: var(--sb-r-pill);
	font-weight: 500;
}

/* ---------- masthead / page title ---------- */

.donut-masthead {
	color: var(--sb-ink);
}

.donut-masthead .page-title,
.page-title {
	border-bottom: 1px solid var(--sb-hairline);
}

.page-title h1 {
	font-size: 32px;
	font-weight: 300;
	letter-spacing: -0.1px;
}

/* hero ask box: support-search-bar (pill, hairline) */
.site-header .search-bar .ask-field,
.qa-search input[type="text"],
.qa-search-field {
	background-color: var(--sb-canvas);
	border: 1px solid var(--sb-ash);
	border-radius: var(--sb-r-pill);
	padding: 10px 20px;
	height: auto;
	box-shadow: none;
	color: var(--sb-ink);
	font-family: var(--sb-font);
}
.site-header .search-bar .ask-field:focus,
.qa-search input[type="text"]:focus,
.qa-search-field:focus {
	border: 2px solid var(--sb-primary);
	box-shadow: none;
	outline: 0;
}

/* ---------- buttons ---------- */

/* Bootstrap-flavored buttons (ask box, dialogs) */
.btn {
	font-family: var(--sb-font);
	border-radius: var(--sb-r-pill);
	font-weight: 700;
	letter-spacing: 0.3px;
}
.btn-primary {
	background-color: var(--sb-primary);
	border-color: var(--sb-primary);
	color: var(--sb-on-primary);
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--sb-primary-pressed);
	border-color: var(--sb-primary-pressed);
}
.btn-primary:active,
.btn-primary.active {
	background-color: var(--sb-primary-active);
	border-color: var(--sb-primary-active);
}

/* the hero Ask CTA gets the logo red — the one warm accent on the page */
.site-header .search-bar .ask-btn,
.site-header .search-bar .ask-btn.btn-primary {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
}
.site-header .search-bar .ask-btn:hover,
.site-header .search-bar .ask-btn:focus,
.site-header .search-bar .ask-btn:active {
	background-color: var(--sb-accent-pressed);
	border-color: var(--sb-accent-pressed);
}

/* Q2A form buttons → primary pill */
.qa-form-tall-button,
.qa-form-wide-button,
.qa-form-basic-button,
.qa-form-tall-table input[type="button"],
.qa-form-wide-button-save,
.qa-form-wide-button-saverecalc,
.qa-form-tall-button-save,
#login-dropdown-menu.open-login-buttons a,
.qa-template-register div.qa-part-custom a.open-login-button,
.qa-template-login div.qa-part-custom a.open-login-button {
	background-color: var(--sb-primary);
	background-image: none;
	border: 1px solid var(--sb-primary);
	border-radius: var(--sb-r-pill);
	color: var(--sb-on-primary);
	font-family: var(--sb-font);
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 7px 20px;
	text-shadow: none;
	box-shadow: none;
}
.qa-form-tall-button:hover,
.qa-form-wide-button:hover,
.qa-form-basic-button:hover,
.qa-form-tall-table input[type="button"]:hover,
.qa-form-wide-button-save:hover,
.qa-form-wide-button-saverecalc:hover,
.qa-form-tall-button-save:hover,
#login-dropdown-menu.open-login-buttons a:hover,
.qa-template-register div.qa-part-custom a.open-login-button:hover,
.qa-template-login div.qa-part-custom a.open-login-button:hover,
.qa-form-tall-button:focus,
.qa-form-wide-button:focus,
.qa-form-basic-button:focus,
.qa-form-tall-button-save:focus {
	background-color: var(--sb-primary-pressed);
	border-color: var(--sb-primary-pressed);
	color: var(--sb-on-primary);
}
.qa-form-tall-button:active,
.qa-form-wide-button:active,
.qa-form-basic-button:active,
.qa-form-tall-button-save:active {
	background-color: var(--sb-primary-active);
	border-color: var(--sb-primary-active);
	color: var(--sb-on-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* cancel / lower-emphasis → secondary outline pill */
.qa-form-tall-button-cancel,
.qa-form-light-button {
	background-color: transparent;
	background-image: none;
	border: 1px solid var(--sb-ash);
	border-radius: var(--sb-r-pill);
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-weight: 700;
	letter-spacing: 0.3px;
	box-shadow: none;
	text-shadow: none;
}
.qa-form-tall-button-cancel:hover,
.qa-form-light-button:hover,
.qa-form-tall-button-cancel:focus,
.qa-form-light-button:focus {
	background-color: var(--sb-surface-soft);
	border-color: var(--sb-ash);
	color: var(--sb-ink);
}

/* selected answer tick stays green-ish but flat */
.qa-a-selected {
	border-radius: var(--sb-r-pill);
	box-shadow: none;
}

/* ---------- tags: filter pills ---------- */

.qa-tag-link {
	background-color: var(--sb-surface-card);
	background-image: none;
	border: 0;
	border-radius: var(--sb-r-pill);
	color: var(--sb-ink);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 12px;
	line-height: 1.5;
}
.qa-tag-link:hover,
.qa-tag-link:focus {
	background-color: var(--sb-primary);
	color: var(--sb-on-primary);
	text-decoration: none;
}

/* ---------- question list: support-rows with hairline rules ---------- */

/*
	The separator is drawn as an INSET shadow rather than a border, and margin-bottom is reset.
	donut.min.css sets "margin-bottom: -1px" on .qa-q-list-item (list-group style, so adjacent
	bordered boxes share one border). That pulls the next item up by 1px, and because each item
	has an opaque background and later siblings paint over earlier ones, the next item's
	background covered any 1px bottom border - which is why the previous border-bottom here was
	invisible in every position except the very last item.

	Drawing the rule inside the box costs zero height: "border: 0 + margin-bottom: 0" occupies
	exactly what "border-bottom: 1px + margin-bottom: -1px" did, so row spacing is unchanged.
*/
.qa-q-list-item {
	background-color: var(--sb-canvas);
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
	-webkit-box-shadow: inset 0 -1px 0 var(--sb-rule);
	box-shadow: inset 0 -1px 0 var(--sb-rule);
	padding-top: 16px;
	padding-bottom: 16px;
}

/* donut's :first-child/:last-child rules (0,2,0) outrank the border-radius above (0,1,0),
   and the inset rule would otherwise curve away at the first and last rows */
.qa-q-list-item:first-child,
.qa-q-list-item:last-child {
	border-radius: 0;
}

.qa-q-item-title a {
	font-family: var(--sb-font);
	font-size: 17px;
	font-weight: 500;
	color: var(--sb-ink);
	letter-spacing: 0.1px;
}
.qa-q-item-title a:hover {
	color: var(--sb-primary);
	text-decoration: none;
}

/* meta line under titles */
.qa-q-item-meta, .qa-a-item-meta, .qa-c-item-meta,
.qa-q-view-meta, .qa-view-count, .qa-voted-on {
	color: var(--sb-mute);
	font-size: 13px;
}

/* vote / answer / view stat chips */
.qa-vote-count, .qa-a-count, .qa-view-count-data,
.qa-upvote-count, .qa-downvote-count, .qa-netvote-count {
	font-family: var(--sb-font);
}

/* --- stat row: votes / answers / views as text above the title --- */
/*
	Donut renders these as 60x60 bordered boxes floated into their own 22.5% column. The theme
	no longer emits .qa-q-item-stats or .qa-q-item-main, so its float rules never apply and only
	the chips themselves need unwinding. Scoped .qa-q-list .sb-q-stats (0,3,0) so these outrank
	Donut's mobile rules at .qa-q-list .qa-a-count (0,2,0) without !important.
*/

.sb-q-stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-bottom: 6px;
	font-family: var(--sb-font);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--sb-mute);
}

.qa-q-list .sb-q-stats .qa-netvote-count,
.qa-q-list .sb-q-stats .qa-upvote-count,
.qa-q-list .sb-q-stats .qa-downvote-count,
.qa-q-list .sb-q-stats .qa-a-count,
.qa-q-list .sb-q-stats .qa-view-count {
	float: none;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	overflow: visible;
	text-align: left;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.qa-q-list .sb-q-stats .qa-netvote-count-data,
.qa-q-list .sb-q-stats .qa-upvote-count-data,
.qa-q-list .sb-q-stats .qa-downvote-count-data,
.qa-q-list .sb-q-stats .qa-a-count-data,
.qa-q-list .sb-q-stats .qa-view-count-data {
	display: inline;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: 600;
}

.qa-q-list .sb-q-stats .qa-netvote-count-pad,
.qa-q-list .sb-q-stats .qa-a-count-pad,
.qa-q-list .sb-q-stats .qa-view-count-pad {
	font-size: inherit;
}

/* answered -> green outline pill. The three states are equal specificity, so order matters. */
.qa-q-list .sb-q-stats .qa-a-count {
	padding: 1px 9px;
	border: 1px solid var(--sb-answered);
	border-radius: var(--sb-r-pill);
	color: var(--sb-answered);
}
/* no answers yet -> plain muted text */
.qa-q-list .sb-q-stats .qa-a-count-zero {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sb-mute);
}
/* an answer has been accepted -> solid pill */
.qa-q-list .sb-q-stats .qa-a-count-selected {
	background-color: var(--sb-answered);
	border-color: var(--sb-answered);
	color: var(--sb-on-primary);
}
.qa-q-list .sb-q-stats .qa-a-count-selected::before {
	content: "\2713\00a0";
}

/* read/unread dot, appended to .sb-q-stats by the theme's own JS */
.sb-q-stats .qa-q-read-status {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
}

/* replaces donut.css's .qa-template-admin .qa-q-item-stats, a class this theme no longer emits */
.qa-template-admin .sb-q-stats {
	display: none;
}

/* --- two-line content preview --- */

.sb-q-preview {
	margin-top: 4px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--sb-body);
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* --- right-justified who / what / when --- */

.sb-q-meta {
	margin-top: 8px;
	text-align: right;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--sb-mute);
}
.sb-q-meta .qa-q-item-meta {
	font-size: inherit;
}
.sb-q-meta .qa-q-item-who-data a {
	color: var(--sb-link);
}
.sb-q-meta .qa-q-item-who-points-data {
	font-weight: 600;
	color: var(--sb-ink);
}
.sb-q-meta .qa-q-item-what {
	font-weight: 400;
	color: var(--sb-mute);
}

/* --- category chip + tags --- */

.sb-q-taxonomy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}

.sb-q-taxonomy .qa-q-item-where {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 220px;
	padding: 2px 10px 2px 6px;
	border: 1px solid var(--sb-hairline);
	border-radius: var(--sb-r-pill);
	background-color: var(--sb-surface-card);
	font-size: 12px;
	line-height: 1.5;
}
.sb-q-taxonomy .qa-q-item-where-data {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.sb-q-taxonomy .qa-q-item-where .qa-category-logo {
	flex: none;
}
/* long category names ("Publishing Assistant") truncate rather than wrapping the chip */
.sb-q-taxonomy .qa-q-item-where a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--sb-ink);
}
.sb-q-taxonomy .qa-q-item-where a:hover {
	color: var(--sb-primary);
	text-decoration: none;
}

.sb-q-taxonomy .qa-q-item-tags {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* ---------- content cards & side panels ---------- */

.panel,
.panel-default,
.qa-sidepanel > div,
.donut-sidebar > div,
.qa-widget-side {
	background-color: var(--sb-surface-card);
	border: 0;
	border-radius: var(--sb-r-md);
	box-shadow: none;
}

.panel-default > .panel-heading,
.panel-heading {
	background-color: transparent;
	background-image: none;
	border-bottom: 1px solid var(--sb-hairline);
	border-radius: var(--sb-r-md) var(--sb-r-md) 0 0;
	color: var(--sb-ink);
	font-weight: 600;
}

.list-group-item {
	border-color: var(--sb-hairline);
}

/* ---------- forms ---------- */

.form-control,
.qa-form-tall-text,
.qa-form-wide-text,
textarea.qa-form-tall-text {
	border: 1px solid var(--sb-ash);
	border-radius: var(--sb-r-sm);
	box-shadow: none;
	color: var(--sb-ink);
	font-family: var(--sb-font);
}
.form-control:focus,
.qa-form-tall-text:focus,
.qa-form-wide-text:focus,
textarea.qa-form-tall-text:focus {
	border: 2px solid var(--sb-primary);
	box-shadow: none;
	outline: 0;
}

.qa-form-tall-label,
.qa-form-wide-label {
	color: var(--sb-ink);
	font-weight: 600;
}

/* validation */
.qa-error,
.qa-form-tall-error,
.qa-form-wide-error {
	color: var(--sb-warning);
}

/* ---------- breadcrumb ---------- */

.donut-breadcrumb .breadcrumb {
	background-color: transparent;
	font-size: 13px;
}
.donut-breadcrumb .breadcrumb > li > a {
	color: var(--sb-mute);
}
.donut-breadcrumb .breadcrumb > li > a:hover {
	color: var(--sb-primary);
}

/* ---------- pagination: pills ---------- */

.qa-page-links-item,
.pagination > li > a,
.pagination > li > span {
	border-radius: var(--sb-r-pill);
	color: var(--sb-link);
	border-color: var(--sb-hairline);
	margin: 0 2px;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span,
.qa-page-selected {
	background-color: var(--sb-primary);
	border-color: var(--sb-primary);
	color: var(--sb-on-primary);
	border-radius: var(--sb-r-pill);
}

/* ---------- footer: the full-bleed blue band ---------- */

.donut-footer {
	background-color: var(--sb-primary);
	padding: 40px 0 28px;
}
.qa-footer,
.donut-footer .qa-footer {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
}
.qa-footer a,
.qa-footer a:visited,
.qa-nav-footer-item a,
.donut-footer a {
	color: var(--sb-on-primary);
	font-weight: 500;
}
.qa-footer a:hover,
.donut-footer a:hover {
	color: var(--sb-on-primary);
	text-decoration: underline;
}
.footer-social a {
	color: rgba(255, 255, 255, 0.85);
}
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
}

/* ---------- misc chrome ---------- */

/* avatars: circles per the spec's icon geometry */
.qa-avatar-image,
.navbar-nav > li > a.navbar-user-img img.qa-avatar-image {
	border-radius: 50%;
}

/* dropdowns: 8px cards with hairline, soft press shadow only */
.dropdown-menu,
.navbar-nav.navbar-right li .dropdown-menu {
	border: 1px solid var(--sb-hairline);
	border-radius: var(--sb-r-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* alerts flatten to 8px */
.alert {
	border-radius: var(--sb-r-md);
}

/* kill donut's leftover gradients/shadows on chrome */
.qa-part-q-view,
.qa-q-view,
.qa-a-list-item {
	box-shadow: none;
}