/**    ______     ______        __       _       __     __  
 *    / ____/____/ ____ \____  / /__    | |     / /__  / /_ 
 *   / /_  / ___/ / __ `/ __ \/ //_/____| | /| / / _ \/ __ \
 *  / __/ / /  / / /_/ / / / / ,< /_____/ |/ |/ /  __/ /_/ /
 * /_/   /_/   \ \__,_/_/ /_/_/|_|      |__/|__/\___/_.___/ 
 *              \____/                                      
 *
 * ===================
 * Leggero CSS Styles
 * ===================
 *
 * Name: Stringendo
 * Theme: Leggero
 * Author: Fraenkiman
 * Version: 1.4.1
 * Module: common.css
 *
 * Modern, bright and responsive presentation layer.
 */

/**
 * Subtle frontend fade-in (progressive enhancement)
 * ------------------------------------------------
 * Enabled by JS adding: html.fp-fadein
 * Skipped automatically for admin pages and users with reduced motion.
 */

@keyframes fpStringendoFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fpStringendoFadeInOpacity {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------- Design tokens ---------- */
:root {
	/* Let form controls follow the active browser/system palette */
	color-scheme: light dark;

	--fp-container: 1279px;
	--fp-sidebar: 320px;

	--fp-bg: #f6f7fb;
	--fp-surface: #ffffff;
	--fp-surface-2: #f1f5f9;
	--fp-text: #0f172a;
	--fp-muted: #475569;
	--fp-border: #e2e8f0;

	--fp-accent: #b22222;
	--fp-accent-2: #8b0000;
	--fp-accent-3: #ff8c00;
	--fp-accent-4: #4b0082;
	--fp-accent-soft: #ffe4e6;
	--fp-accent-soft-2: #ffedd5;

	--fp-link: #007fff;
	--fp-link-hover: #b22222;
	--fp-link-visited: #800080;

	--fp-accent-rgb: 178, 34, 34;
	--fp-accent-2-rgb: 139, 0, 0;
	--fp-accent-3-rgb: 255, 140, 0;
	--fp-link-rgb: 0, 127, 255;
	--fp-focus-rgb: 0, 127, 255;

	--fp-accent-gradient: linear-gradient(135deg, var(--fp-accent-2) 0%, var(--fp-accent-3) 100%);
	--fp-accent-gradient-hover: linear-gradient(135deg, var(--fp-accent) 0%, var(--fp-accent-3) 100%);

	--fp-shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.06);
	--fp-shadow: 0 10px 30px rgba(2, 6, 23, 0.10);

	--fp-radius: 14px;
	--fp-radius-sm: 10px;

	--fp-space-1: .25rem;
	--fp-space-2: .5rem;
	--fp-space-3: .75rem;
	--fp-space-4: 1rem;
	--fp-space-5: 1.25rem;
	--fp-space-6: 1.5rem;

	--fp-search-mag: rgba(15, 23, 42, .55);
	--fp-heading: #8b0000;
	--fp-header-gradient: linear-gradient(180deg, #ff8c00 0%, #8b0000 100%);
	--fp-header-title: #0f172a;
	--fp-header-subtitle: #f8f9fc;
	--fp-header-link: #f8f9fc;
	--fp-entry-bg: linear-gradient(1deg, rgb(255, 219, 166) 0%, rgb(249, 246, 241) 100%);
	--fp-widget-bg: linear-gradient(180deg, rgb(247, 240, 223) 0%, rgb(253, 198, 154) 100%);
	--fp-admin-entry-bg: linear-gradient(360deg, rgb(255, 219, 166) 0%, rgb(249, 246, 241) 100%);
	--fp-cookie-bg: rgba(255, 255, 255, .95);
	--fp-cookie-border: var(--fp-border, #e2e8f0);
	--fp-pattern-dot-rgb: 255, 140, 0;
	--fp-button-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--fp-bg: #0b1220;
		--fp-surface: #121a28;
		--fp-surface-2: #182235;
		--fp-text: #eef4ff;
		--fp-muted: #b5c3d6;
		--fp-border: #2a3850;
		--fp-accent: #ff8c00;
		--fp-accent-2: #ffb347;
		--fp-accent-3: #ffd166;
		--fp-accent-4: #c792ea;
		--fp-accent-soft: #3a1820;
		--fp-accent-soft-2: #342314;
		--fp-link: #7cc5ff;
		--fp-link-hover: #ffd166;
		--fp-link-visited: #d8b4fe;
		--fp-accent-rgb: 255, 140, 0;
		--fp-accent-2-rgb: 255, 179, 71;
		--fp-accent-3-rgb: 255, 209, 102;
		--fp-link-rgb: 124, 197, 255;
		--fp-focus-rgb: 124, 197, 255;
		--fp-shadow-sm: 0 12px 26px rgba(0, 0, 0, 0.32);
		--fp-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
		--fp-search-mag: rgba(238, 244, 255, .68);
		--fp-heading: #ffb347;
		--fp-header-gradient: linear-gradient(180deg, #5a1f0d 0%, #1f0b05 100%);
		--fp-header-title: #fff1d6;
		--fp-header-subtitle: #ffd9a0;
		--fp-header-link: #ffe5bd;
		--fp-entry-bg: linear-gradient(180deg, rgba(28, 20, 13, .95) 0%, rgba(16, 22, 34, .98) 100%);
		--fp-widget-bg: linear-gradient(180deg, rgba(43, 30, 17, .96) 0%, rgba(20, 27, 41, .98) 100%);
		--fp-admin-entry-bg: linear-gradient(180deg, rgba(51, 35, 20, .96) 0%, rgba(18, 24, 38, .98) 100%);
		--fp-cookie-bg: rgba(11, 18, 32, .96);
		--fp-cookie-border: #2a3850;
		--fp-pattern-dot-rgb: 183, 116, 40;
		--fp-button-text: #000000;
	}
}

/* ---------- Base reset ---------- */
* {
	box-sizing: border-box;
}

html {
	text-size-adjust: 100%;
	background-color: var(--fp-bg, #f6f7fb);
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--fp-text, #0f172a);
	background-color: var(--fp-bg, #f6f7fb);
	/* SVG pattern + tiny gradient fallback (visible even if SVG fails to load) */
	background-image: url('../imgs/bg.svg'), radial-gradient(circle at 1px 1px, rgba(var(--fp-pattern-dot-rgb, 255, 140, 0), .045) 1px, transparent 0);
	background-repeat: repeat, repeat;
	background-size: 600px 600px, 36px 36px;
	background-position: top left, top left;
	background-attachment: scroll, scroll;
}

#background-image {
	display: none;
}

#background-svg {
	display: none;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

input,
textarea,
select,
button {
	font: inherit;
}

h1,
h2,
h3,
h4 {
	color: var(--fp-text, #0f172a);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h2, h3, h4 {
	color: var(--fp-heading, #8b0000);
}

/* Improve focus visibility without being loud */
:focus-visible {
	outline: 3px solid rgba(var(--fp-focus-rgb, 0, 127, 255), .38);
	outline-offset: 2px;
}

/* ---------- Links ---------- */
a {
	color: var(--fp-link, var(--fp-accent, #b22222));
	text-decoration: none;
	text-underline-offset: 2px;
}

a:visited {
	color: var(--fp-link-visited, #800080);
}

a:hover {
	text-decoration: underline;
	color: var(--fp-link-hover, var(--fp-accent, #b22222));
}

/* ---------- Layout ---------- */
#body-container {
	max-width: var(--fp-container, 1279px);
	margin: 0 auto;
	padding: var(--fp-space-5, 1.25rem);
}

#head {
	background: var(--fp-header-gradient, linear-gradient(180deg, #ff8c00 0%, #8b0000 100%));
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: var(--fp-radius, 14px);
	box-shadow: var(--fp-shadow-sm, 0 2px 10px rgba(2, 6, 23, 0.06));
	padding: var(--fp-space-6, 1.5rem);
	/* Layout: title/subtitle left, feeds+search right */
	display: grid;
	grid-template-columns: 1fr minmax(14rem, 22rem);
	grid-template-areas:
		"title noprint"
		"subtitle noprint";
	column-gap: var(--fp-space-5, 1.25rem);
	row-gap: .1rem;
}

#head h1 {
	grid-area: title;
	margin: 0;
	font-size: clamp(1.7rem, 2.4vw, 2.35rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-align: left;
}

#head h1 a {
	color: var(--fp-header-title, #0f172a);
}

#head .subtitle {
	grid-area: subtitle;
	margin: var(--fp-space-2, .5rem) 0 0 0;
	color: var(--fp-header-subtitle, #f8f9fc);
	font-size: 1.02rem;
	text-align: left;
}

/* Header right block: RSS/Atom/help + search */
#head .noprint {
	grid-area: noprint;
	justify-self: end;
	align-self: start;
	text-align: right;
	line-height: 1.35;
	color: var(--fp-header-link, var(--fp-surface, rgba(248, 249, 252, 1)));
}

#head .noprint a {
	color: var(--fp-header-link, var(--fp-surface, rgba(248, 249, 252, 1)));
}

#head .noprint form {
	margin: .35rem 0 0 0;
	position: relative;
}

#head .noprint input[type="text"] {
	margin: 0;
	padding-right: 2.35rem;
}

#head .noprint input[type="text"]::placeholder {
	color: var(--fp-search-mag, rgba(15, 23, 42, .55));
	opacity: 1;
}

/* Search button inside the input, neutral (no gradient/background) */
#head .noprint button.search-button {
	position: absolute;
	right: .25rem;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	color: var(--fp-search-mag, rgba(15, 23, 42, .55));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

#head .noprint button.search-button:hover {
	background: transparent;
}

#head .noprint button.search-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(var(--fp-focus-rgb, 0, 127, 255), .18);
}

#head .noprint button.search-button i {
	color: inherit;
}

/* Responsive: stack header blocks on small screens */
@media (max-width: 720px) {
	#head {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"subtitle"
			"noprint";
	}

	#head .noprint {
		justify-self: stretch;
		text-align: right;
		margin-top: .6rem;
	}
}

/* Stringendo: headings a bit more "drängend" */
h2,
h3,
h4 {
	color: var(--fp-heading, #8b0000);
}

#outer-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--fp-space-5, 1.25rem);
	margin-top: var(--fp-space-5, 1.25rem);
}

/**
 * Stringendo layout wrapper (injected by stringendo via JS):
 * - Keeps the sticky sidebar boundary limited to the main+sidebar row.
 * - Allows optional #columnbottom widgets without the sticky column overlapping them.
 */
#stringendo-content-row {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--fp-space-5, 1.25rem);
	order: 1;
}

/* Keep top and bottom widget bars as full-width rows within the flex layout */
#columntop {
	flex: 0 0 100%;
	order: 0;
}
#columnbottom {
	flex: 0 0 100%;
	order: 3;
}

#main,
#cpmain {
	flex: 1 1 0;
	min-width: 0;
}

/* Fade-in: main first, then column (frontend only; JS adds html.fp-fadein). */
html.fp-fadein body:not([class^="admin-"]) #main {
	opacity: 0;
	animation: fpStringendoFadeIn 320ms ease-out 0ms both;
	will-change: opacity, transform;
}

html.fp-fadein body:not([class^="admin-"]) #column {
	opacity: 0;
	animation: fpStringendoFadeInOpacity 260ms ease-out 140ms both;
	will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
	html.fp-fadein body:not([class^="admin-"]) #main,
	html.fp-fadein body:not([class^="admin-"]) #column {
		animation: none;
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* Admin pages use only #cpmain, no sidebar */
body[class^="admin-"] #outer-container {
	gap: var(--fp-space-4, 1rem);
}

@media (max-width: 959px) {
	#body-container {
		padding: var(--fp-space-4, 1rem);
	}

	#outer-container {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	#stringendo-content-row {
		flex-direction: column;
		align-items: stretch;
	}

	#main,
	#cpmain,
	#column {
		width: 100%;
	}
}

/* ---------- Content blocks ---------- */
.entry {
	background: var(--fp-entry-bg, linear-gradient(1deg, rgb(255, 219, 166) 0%, rgb(249, 246, 241) 100%));
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: var(--fp-radius, 14px);
	box-shadow: var(--fp-shadow-sm, 0 2px 10px rgba(2, 6, 23, 0.06));
	padding: var(--fp-space-6, 1.5rem);
	margin: 0 0 var(--fp-space-5, 1.25rem) 0;
	overflow: hidden;
}

/* Date heading printed once for same-day entries */
h6.date {
	margin: 0 0 var(--fp-space-2, .5rem) 0;
	font-size: .85rem;
	color: var(--fp-muted, #475569);
	letter-spacing: .06em;
}

.entry-title,
.entry .title {
	margin: 0 0 var(--fp-space-3, .75rem) 0;
	font-size: clamp(1.25rem, 1.4vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.entry-title a {
	color: var(--fp-text, #0f172a);
}

.entry-title a:hover {
	color: var(--fp-accent-2, #8b0000);
}

.entry p {
	margin: 0 0 var(--fp-space-3, .75rem) 0;
}

.entry p.date {
	margin: .25rem 0 var(--fp-space-4, 1rem) 0;
	color: var(--fp-muted, #475569);
	font-size: .92rem;
}

/* Typography inside entries, static pages and previews */
.entry h2:not(.entry-title):not(.date),
.entry h3,
.entry h4 {
	margin: 1.35rem 0 .6rem 0;
}

.entry h2:not(.entry-title):not(.date) {
	font-size: 1.3rem;
}

.entry h3 {
	font-size: 1.12rem;
}

.entry h4 {
	font-size: 1.02rem;
}

.entry ul,
.entry ol {
	margin: 0 0 var(--fp-space-4, 1rem) 0;
	padding-left: 1.25rem;
	list-style-position: outside;
}

.entry ul {
	list-style: disc;
}

.entry ol {
	list-style: decimal;
}

.entry li {
	margin: .25rem 0;
}

/* Nested archive/search lists (entrylist plugin output) */
.entry ul.entrylist {
	list-style: none;
	padding-left: 0;
	margin: 0 0 var(--fp-space-4, 1rem) 0;
}

.entry ul.entrylist ul.entrylist {
	margin-top: .35rem;
	padding-left: 1rem;
	border-left: 2px solid var(--fp-border, #e2e8f0);
}

.entry .entrylist-time {
	font-variant-numeric: tabular-nums;
	color: var(--fp-muted, #475569);
	margin-right: .35rem;
}

.entry blockquote {
	margin: var(--fp-space-4, 1rem) 0;
	padding: .85rem 1rem;
	border-left: 4px solid var(--fp-accent, #b22222);
	background: var(--fp-surface-2, #f1f5f9);
	border-radius: var(--fp-radius-sm, 10px);
}

.entry blockquote p:last-child {
	margin-bottom: 0;
}

.entry hr {
	border: 0;
	height: 1px;
	background: var(--fp-border, #e2e8f0);
	margin: var(--fp-space-5, 1.25rem) 0;
}

.entry pre,
.entry code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.entry code {
	background: var(--fp-surface-2, #f1f5f9);
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: 8px;
	padding: .1rem .35rem;
}

.entry pre {
	background: var(--fp-surface-2, #f1f5f9);
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: var(--fp-radius-sm, 10px);
	padding: var(--fp-space-4, 1rem);
	overflow: auto;
}

.entry pre code {
	border: 0;
	padding: 0;
}

u {
	text-decoration-thickness: .08em;
	text-underline-offset: 2px;
}

del,
s {
	color: var(--fp-muted, #475569);
}

/* Tables (front-end and some plugin outputs) */
.entry table,
table {
	max-width: 100%;
	margin-bottom: 2em;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	border: 1px solid var(--fp-border, #e2e8f0);
}

.entry table th,
.entry table td,
table th,
table td {
	border: 1px solid var(--fp-border, #e2e8f0);
	padding: .55rem .65rem;
	vertical-align: top;
	background: var(--fp-surface, #ffffff);
}

.entry table th,
table th {
	background: var(--fp-surface-2, #f1f5f9);
	font-weight: 700;
}

#main table tr:first-child th:last-child { border-top-right-radius: 10px }

#main table tr:first-child th:first-child { border-top-left-radius: 10px }

#main table tr:last-child td:last-child { border-bottom-right-radius: 10px }

#main table tr:last-child td:first-child { border-bottom-left-radius: 10px }

/* Entry footer */
.entry ul.entry-footer {
	/* Override generic list styles for .entry ul */
	list-style: none;
	padding-left: 0;
}

.entry-footer {
	list-style-type: none;
	padding: 0;
	margin: var(--fp-space-5, 1.25rem) 0 0 0;
	border-top: 1px solid var(--fp-accent-3, #ff8c00);
	padding-top: var(--fp-space-3, .75rem);
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.25rem;
	align-items: baseline;
	justify-content: space-between;
	color: var(--fp-muted, #475569);
	font-size: .92rem;
}

.entry-footer li {
	margin: 0;
}

.entry-footer strong {
	color: var(--fp-text, #0f172a);
	font-weight: 800;
}

.entry-footer a {
	font-weight: 700;
}

/* Navigation */
.navigation {
	margin: var(--fp-space-4, 1rem) 0 var(--fp-space-6, 1.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fp-space-3, .75rem);
	flex-wrap: wrap;
}

/**
 * nextpage/prevpage are rendered as <div class="alignright|alignleft"><a ...></a></div>
 * and the templates output {nextpage}{prevpage} (next first).
 * In flex layouts that would invert the visual placement. Fix this without touching templates.
 */
.navigation .alignleft,
.navigation .alignright {
	float: none;
	display: flex;
}

.navigation .alignleft {
	order: 1;
}

.navigation .alignright {
	order: 2;
	margin-left: auto;
}

.navigation a {
	display: inline-block;
	padding: .5rem .85rem;
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: 999px;
	background: var(--fp-surface, #ffffff);
	box-shadow: var(--fp-shadow-sm, 0 2px 10px rgba(2, 6, 23, 0.06));
}

.navigation a:hover {
	text-decoration: none;
	border-color: rgba(var(--fp-accent-3-rgb, 255, 140, 0), .45);
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: .55rem .65rem;
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: 10px;
	background: var(--fp-surface, #ffffff);
	color: var(--fp-text, #0f172a);
	box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.03);
	margin-bottom: 0.5em;
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: rgba(var(--fp-focus-rgb, 0, 127, 255), .55);
	box-shadow: 0 0 0 4px rgba(var(--fp-focus-rgb, 0, 127, 255), .14);
	outline: none;
}

input[type="submit"],
input[type="button"],
.link-comments a,
.readmore a,
button:not(.leaflet-control):not(.pswp__button):not(.bb-button) {
	appearance: none;
	border: 1px solid rgba(var(--fp-accent-2-rgb, 139, 0, 0), .35);
	border-radius: 999px;
	background: var(--fp-accent-gradient, var(--fp-accent, #b22222));
	color: var(--fp-button-text, #ffffff);
	padding: .55rem 1rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
.link-comments a:hover,
.readmore a:hover,
button:not(.leaflet-control):not(.pswp__button):not(.bb-button):hover {
	transition-duration: .25s;
	background: var(--fp-accent-gradient-hover, var(--fp-accent-2, #8b0000));
}

/**
 * BBCode & emoticon toolbars (frontend + admin): keep neutral icon buttons.
 * Must override the general button styling (accent gradients) reliably.
 */
.bb-btn-tlb button.bb-button,
#admin-bbcode-toolbar button.bb-button,
.emoticons button[type="button"]:not(.bb-button) {
	appearance: none;
	border: 1px solid var(--fp-border, #e2e8f0);
	background: var(--fp-surface, #ffffff);
	color: var(--fp-text, #0f172a);
	border-radius: var(--fp-radius-sm, 10px);
	padding: 0;
	height: 30px;
	width: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(2, 6, 23, .04);
}

.bb-btn-tlb button.bb-button:hover,
#admin-bbcode-toolbar button.bb-button:hover,
.emoticons button[type="button"]:not(.bb-button):hover {
	background: var(--fp-surface, #ffffff);
	border-color: rgba(var(--fp-accent-3-rgb, 255, 140, 0), .45);
	box-shadow: 0 0 0 4px rgba(var(--fp-accent-3-rgb, 255, 140, 0), .12);
}

.bb-btn-tlb button.bb-button:focus-visible,
#admin-bbcode-toolbar button.bb-button:focus-visible,
.emoticons button[type="button"]:not(.bb-button):focus-visible {
	outline: none;
	border-color: rgba(var(--fp-focus-rgb, 0, 127, 255), .55);
	box-shadow: 0 0 0 4px rgba(var(--fp-focus-rgb, 0, 127, 255), .18);
}

input[type="reset"],
button[type="reset"] {
	appearance: none;
	border: 1px solid rgba(var(--fp-accent-2-rgb, 139, 0, 0), .35);
	border-radius: 999px;
	background: transparent;
	color: var(--fp-accent-2, #8b0000);
	padding: .55rem 1rem;
	font-weight: 500;
	cursor: pointer;
}

input[type="reset"]:hover,
button[type="reset"]:hover {
	background: rgba(var(--fp-accent-3-rgb, 255, 140, 0), .10);
}

input[type="submit"]:disabled,
input[type="button"]:disabled,
button:not(.leaflet-control):not(.pswp__button):not(.bb-button):disabled {
	opacity: .6;
	cursor: not-allowed;
}

.buttonbar {
	margin-top: var(--fp-space-4, 1rem);
	text-align: center;
}

.webshare {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	margin: 0.3em 0em 0.3em 0em;
}

fieldset {
	border: 1px solid rgba(var(--fp-accent-3-rgb, 255, 140, 0), .45);
	border-radius: var(--fp-radius-sm, 10px);
	padding: var(--fp-space-4, 1rem);
	margin-bottom: 1em;
}

legend {
	padding: 0 .5rem;
	color: var(--fp-muted, #475569);
	font-weight: 500;
}

/* Search page: keep date selects on one line on desktop */
@media (min-width: 720px) {
	#search select[name="Date_Day"],
	#search select[name="Date_Month"],
	#search select[name="Date_Year"] {
		width: auto;
		max-width: none;
		display: inline-block;
		vertical-align: middle;
	}

	#search select[name="Date_Day"] {
		min-width: 5.25rem;
	}

	#search select[name="Date_Month"] {
		min-width: 11rem;
	}

	#search select[name="Date_Year"] {
		min-width: 7rem;
	}
}

/* Search page: categories list (match the sidebar categories widget style) */
#search fieldset ul {
	margin: .5rem 0 0 0;
	padding-left: 0;
	list-style: none;
}

#search fieldset ul ul {
	margin: .25rem 0 0 .30rem;
	padding-left: 1rem;
	border-left: 1px solid var(--lt-color-gray-400, #c2c9d6);
}

#search fieldset ul li {
	margin: .3rem 0;
}

#search fieldset ul label {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}

#search fieldset ul input[type="radio"] {
	margin: 0;
}

/* Search page: Captcha inputfield */
input#aspam_code {
	margin-top: 0.3rem;
}

/* Comment form: labels come after the input in templates (visual reorder only) */
#comment-userdata p {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: .35rem;
	margin: 0 0 var(--fp-space-3, .75rem) 0;
}

#comment-userdata label.textlabel {
	color: var(--fp-muted, #475569);
	font-size: .92rem;
}

/* ---------- Comments list ---------- */
ol#comments {
	margin: var(--fp-space-4, 1rem) 0 0 0;
	padding: 0;
	list-style-type: decimal;
	list-style-position: inside;
}

ol#comments > li {
	margin: 0 0 var(--fp-space-4, 1rem) 0;
	padding: var(--fp-space-4, 1rem);
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: var(--fp-radius-sm, 10px);
	background: var(--fp-surface, #ffffff);
	box-shadow: var(--fp-shadow-sm, 0 2px 10px rgba(2, 6, 23, 0.06));
}

ol#comments > li.comment-admin {
	background: var(--fp-accent-soft-2, #ffedd5);
}

.comment-name {
	font-weight: 500;
}

ol#comments p.date {
	margin: .25rem 0 .75rem;
	font-size: .92rem;
	color: var(--fp-muted, #475569);
}

ol#comments p {
	margin: 0 0 .75rem 0;
}

ol#comments ul,
ol#comments ol {
	margin: 0 0 1rem 0;
	padding-left: 1.25rem;
	list-style-position: outside;
}

ol#comments ul {
	list-style: disc;
}

ol#comments ol {
	list-style: decimal;
}

ol#comments li {
	background: rgb(255, 219, 166);
}

ol#comments blockquote {
	margin: 1rem 0;
	padding: .85rem 1rem;
	border-left: 4px solid var(--fp-accent, #b22222);
	background: var(--fp-surface-2, #f1f5f9);
	border-radius: var(--fp-radius-sm, 10px);
}

ol#comments pre,
ol#comments code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ol#comments code {
	background: var(--fp-surface-2, #f1f5f9);
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: 8px;
	padding: .1rem .35rem;
}

ol#comments pre {
	background: var(--fp-surface-2, #f1f5f9);
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: var(--fp-radius-sm, 10px);
	padding: 1rem;
	overflow: auto;
}

ol#comments pre code {
	border: 0;
	padding: 0;
}

/* ---------- Footer ---------- */
#footer {
	margin-top: var(--fp-space-5, 1.25rem);
	padding: var(--fp-space-4, 1rem);
	text-align: center;
	color: var(--fp-muted, #475569);
}

#footer p {
	margin: 0;
}

/* Make floats behave in modern layouts */
.entry:after,
#cpmain:after {
	content: "";
	display: table;
	clear: both;
}

@media (min-width: 480px) {
	body {
		background-attachment: fixed;
	}
}

/* PhotoSwipe; responsive */
@media (max-width: 719px) {
	div.floatleft,
	div.floatright,
	.img-gallery div.photoswipe figure { /* unset photoswipe.css */
		float: unset;
		
	}

	div.photoswipe figure { /* unset photoswipe.css */
		margin: auto !IMPORTANT;
	}

	div.photoswipe figcaption {
		width: 100% !IMPORTANT;
	}

	div.floatright,
	div.floatleft,
	div.photoswipe.thumbnail.nofloat {
		width: unset !IMPORTANT;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	div.img-gallery {
		text-align: center;
	}
}

.photoswipe figure img {
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}

div.photoswipe figcaption {
	font-size: 12px !IMPORTANT;
}

.pswp__img {
	border-radius: 3px
}

/**
 * Widgets that overflow the sidebar can be moved below #main via widgets-under-main.js.
 * Ensure the under-main container spans a full row (no matter the sidebar layout).
 */
#outer-container > .stringendo-widgets-under-main {
	flex: 0 0 100%;
	width: 100%;
	order: 2;
}

/* If the sidebar becomes empty, let #main use the full width */
#outer-container.stringendo-no-column #column {
	display: none;
}
#outer-container.stringendo-no-column #main,
#outer-container.stringendo-no-column #cpmain {
	flex: 1 1 100%;
}

/* BBCode Video + GDPR-Video */
.responsive_bbcode_video {
	position: relative;
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	width: 560px;
	height: 315px;
	margin-bottom: 0.5rem;
}

.responsive_bbcode_video > .video-responsive_bbcode_video {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100% !IMPORTANT;
	height: 100% !IMPORTANT;
	max-width: 100%;
	background-color: var(--qb-highlight-style-error-selected-background-color, #4343431a);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	overflow: hidden;
}

.responsive_bbcode_video.video-float-left {
	float: left;
	margin: 0 1rem 0.5rem 0;
}

.responsive_bbcode_video.video-float-right {
	float: right;
	margin: 0 0 0.5rem 1rem;
}

.responsive_bbcode_video.video-float-nofloat {
	margin-left: auto;
	margin-right: auto;
}

.responsive_bbcode_video button {
	height: unset !IMPORTANT;
}

.video-link {
	bottom: 5em !IMPORTANT;
}

.bbcode_video {
	background-color: rgba(0, 0, 0, 0.3);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	margin: 0px 3px 0px 0px;
}

/* Desktop PC */
@media (max-width: 1279px) {
	.bbcode_video,
	.responsive_bbcode_video {
		width: 400px;
		height: 225px;
	}
}

@media (max-width: 1079px) {
	.bbcode_video,
	.responsive_bbcode_video {
		width: 320px;
		height: 180px;
	}
}

/* mobile Device */
@media (max-width: 959px) {
	.bbcode_video,
	.responsive_bbcode_video {
		width: 480px;
		height: 270px;
	}
}

@media (max-width: 919px) {
	.bbcode_video,
	.responsive_bbcode_video {
		width: 400px;
		height: 225px;
	}
}

@media (max-width: 799px) {
	.bbcode_video,
	.responsive_bbcode_video {
		width: 320px;
		height: 180px;
	}
}

@media (max-width: 719px) {
	.responsive_bbcode_video {
		float: unset !IMPORTANT;
		width: 100%;
		height: auto;
		aspect-ratio: 1.777 / 1;
		margin-left: auto;
		margin-right: auto;
	}

	.responsive_bbcode_video > .video-responsive_bbcode_video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !IMPORTANT;
		height: 100% !IMPORTANT;
	}

	.bbcode_video {
		float: unset ! IMPORTANT;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.bbcode_video.nofloat {
	margin-bottom: 0.5rem;
}

#columntop, #columnbottom {
	width: 100%;
	text-align: center;
}

#columntop ul li, #columnbottom ul li {
	display: inline;
}

#columntop > div, #columnbottom > div {
	background: var(--fp-widget-bg, linear-gradient(180deg, rgb(247, 240, 223) 0%, rgb(253, 198, 154) 100%));
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: var(--fp-radius, 14px);
	box-shadow: var(--fp-shadow-sm, 0 2px 10px rgba(2, 6, 23, 0.06));
	margin: 0;
	overflow: hidden;
}

#columnbottom > div {
	margin: 0 0 var(--fp-space-5, 1.25rem) 0;
}

/* Stringendo dark mode refinements */
@media (prefers-color-scheme: dark) {
	body {
		background-image: url('../imgs/bg.svg'), radial-gradient(circle at 1px 1px, rgba(var(--fp-pattern-dot-rgb, 183, 116, 40), .12) 1px, transparent 0);
	}

	#head h1 a {
		text-shadow: 0 1px 0 rgba(0, 0, 0, .28);
	}

	ol#comments > li.comment-admin {
		background: rgba(var(--fp-accent-3-rgb, 255, 209, 102), .12);
	}

	ol#comments li {
		background: transparent;
	}

	.bb-btn-tlb p .bb-button {
		border-color: rgba(var(--fp-accent-2-rgb, 255, 179, 71), .35);
		background: var(--fp-accent-gradient, linear-gradient(135deg, var(--fp-accent-2, #ffb347) 0%, var(--fp-accent-3, #ffd166) 100%));
		color: var(--fp-button-text, #000000);
	}

	.bb-btn-tlb p .bb-button:hover {
		background: var(--fp-accent-gradient-hover, linear-gradient(135deg, var(--fp-accent, #ff8c00) 0%, var(--fp-accent-3, #ffd166) 100%));
		border-color: rgba(var(--fp-accent-2-rgb, 255, 179, 71), .45);
	}

	.bb-btn-tlb p .bb-button:focus-visible {
		border-color: rgba(var(--fp-focus-rgb, 124, 197, 255), .55);
		box-shadow: 0 0 0 4px rgba(var(--fp-focus-rgb, 124, 197, 255), .18);
	}

	.photoswipe figure img,
	.responsive_bbcode_video > .video-responsive_bbcode_video,
	.bbcode_video,
	.responsive_bbcode_video iframe[data-src] {
		box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
		color: var(--lt-color-gray-500, #8f96a3);
		background: var(--fp-surface-2, #f1f5f9);
		border: 1px solid var(--fp-border, #e2e8f0);
	}
}