/*
Theme Name: Sonnenstaatland (SSL)
Theme URI: https://forum.sonnenstaatland.st
Author: Sonnenstaatland
Author URI: https://forum.sonnenstaatland.st
Description: Modernes, seriöses und klar strukturiertes WordPress Full-Site-Editing (FSE) Block-Theme im Corporate Design des Sonnenstaatland-Forums (forum.sonnenstaatland.st). Mit 1:1 identischem Foren-Masthead, Hintergrund und eigenständigem Magazin-, Dossier- und Seiten-Layout.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wordpress-template-ssl
Tags: blog, news, full-site-editing, block-patterns, block-styles, wide-blocks, featured-images, threaded-comments, translation-ready
*/

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

:root {
	--ssl-blue: #355c7d;
	--ssl-blue-hover: #24465f;
	--ssl-yellow: #d4ac4b;
	--ssl-ink: #2c3540;
	--ssl-muted: #53616e;
	--ssl-line: #cbd3db;
	--ssl-light: #f0f3f5;
	--ssl-ice: #eaf2f8;
	--ssl-ice-border: #b8cddd;
	--ssl-slate: #3f586c;
	--ssl-dark: #3d454a;
	--ssl-header: #304c60;
	--ssl-font: "Open Sans", Arial, sans-serif;
}

/* ==========================================================================
   1. Base Reset & 1:1 Forum Background + Outer Surface (.wrap)
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	height: auto;
	background: #dde3e7;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
.editor-styles-wrapper {
	position: relative;
	z-index: 0;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--ssl-ink);
	font-family: var(--ssl-font);
	font-size: 15px;
	line-height: 1.65;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		#c8d2cb
		url("./assets/images/ssl-bg-blur-small.jpg")
		center top / cover no-repeat;
	pointer-events: none;
}

/* Reserve space for media elements to prevent Cumulative Layout Shift (CLS) */
img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
textarea,
button {
	font-family: var(--ssl-font);
}

a {
	color: #2d526f;
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--ssl-blue);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ssl-blue);
	outline-offset: 2px;
}

/* ==========================================================================
   2. 1:1 Identical Sonnenstaatland Top Header (.ssl-top-header)
   (Exact rules from phpBB-Templates/sonnenstaatland/theme/stylesheet.css)
   ========================================================================== */

.ssl-top-header {
	background: #304c60;
	border-bottom: 2px solid var(--ssl-yellow);
	color: #fff;
}

.ssl-top-inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: calc(100% - 64px);
	max-width: 1320px;
	min-height: 88px;
	margin: 0 auto;
	padding: 10px 18px;
}

.ssl-top-header .site-description {
	display: flex;
	align-items: center;
	gap: 16px;
	float: none;
	width: auto;
	min-width: 0;
}

.ssl-top-header .logo {
	display: block;
	float: none;
	flex-shrink: 0;
	padding: 0;
	text-decoration: none;
}

.ssl-top-header .site_logo {
	display: block;
	width: 112px;
	height: 67px;
	aspect-ratio: 112 / 67;
	background:
		url("./assets/images/SSL-LOGO-26.png")
		center / contain no-repeat;
}

.ssl-brand-copy {
	min-width: 0;
}

.ssl-top-header .site-description h1 {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: #fff;
}

.ssl-top-header .site-description h1 a {
	color: #fff;
	text-decoration: none;
}

.ssl-top-header .site-description p {
	display: block;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #d9e3ea;
}

.ssl-utility-bar {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.ssl-utility-links {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.ssl-utility-links a,
.ssl-utility-placeholder {
	padding: 7px 0;
	border-bottom: 2px solid transparent;
	color: #e4ebf0;
	text-decoration: none;
}

.ssl-utility-links a[aria-current="true"] {
	border-bottom-color: var(--ssl-yellow);
	color: #fff;
}

.ssl-utility-links a:hover {
	border-bottom-color: var(--ssl-yellow);
	color: #fff;
	text-decoration: none;
}

.ssl-utility-placeholder {
	color: #b9c9d5;
	cursor: default;
}

.ssl-social-links {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 16px;
	border-left: 1px solid #6b8191;
}

.ssl-top-header .ssl-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1px solid transparent;
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
}

.ssl-top-header .ssl-social-link:hover {
	background: #466479;
	border-color: #8297a6;
	color: #fff;
	text-decoration: none;
}

.ssl-social-link .icon {
	font-size: 22px;
	line-height: 1;
	width: 22px;
	height: 22px;
	display: block;
}

.ssl-social-link img,
.ssl-social-link svg {
	display: block;
	object-fit: contain;
}

.ssl-top-header a:focus-visible {
	outline-color: #f0cf7c;
}

/* ==========================================================================
   3. Outer White Surface (.wrap) Matching Forum Dimensions & Elevation
   ========================================================================== */

.wrap {
	box-sizing: border-box;
	width: calc(100% - 64px);
	max-width: 1320px;
	min-width: 0;
	margin: 24px auto;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid #c8d1d9;
	border-radius: 7px;
	box-shadow: 0 6px 24px rgba(30, 46, 55, 0.12);
}

.ssl-404-wrap {
	min-height: 60dvh;
}

/* ==========================================================================
   4. Editorial Blog Navigation Bar Inside .wrap (.ssl-editorial-navbar)
   ========================================================================== */

.ssl-editorial-navbar {
	border: 1px solid #d2dae1;
	border-radius: 6px;
	background: #fafbfc;
	margin-bottom: 24px;
}

.ssl-editorial-nav-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	flex-wrap: wrap;
}

.ssl-editorial-brand-links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ssl-nav-home-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ssl-ink);
	background: #e8eef3;
	text-decoration: none;
}

.ssl-nav-home-link:hover {
	background: var(--ssl-blue);
	color: #fff;
}

/* WordPress Navigation / Page List in Top Bar */
.ssl-editorial-nav-top .wp-block-navigation,
.ssl-editorial-nav-top .wp-block-page-list {
	font-size: 13.5px;
	font-weight: 600;
}

.ssl-editorial-nav-top .wp-block-navigation .wp-block-navigation-item__content {
	padding: 6px 10px;
	border-radius: 4px;
	color: #303b45;
	text-decoration: none;
}

.ssl-editorial-nav-top .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: #e8eef3;
	color: #18364c;
}

/* Category Ressort Strip (Bottom Row of Navbar) */
.ssl-editorial-nav-bottom {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	border-top: 1px solid #e2e5e7;
	background: #fff;
	border-radius: 0 0 5px 5px;
	font-size: 12.5px;
	overflow-x: auto;
}

.ssl-ressort-label {
	font-weight: 700;
	color: #344f66;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ssl-horizontal-cats.wp-block-categories-list,
.ssl-horizontal-cats ul {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.ssl-horizontal-cats li {
	margin: 0;
	padding: 0;
}

.ssl-horizontal-cats a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	background: #f0f3f5;
	border: 1px solid #dce3ea;
	color: #294b65;
	font-weight: 600;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ssl-horizontal-cats a:hover {
	background: var(--ssl-blue);
	border-color: var(--ssl-blue);
	color: #fff;
}

/* ==========================================================================
   5. Two-Column Editorial Layout (Main Content + Structured Sidebar)
   ========================================================================== */

.ssl-editorial-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	gap: 28px;
	align-items: start;
}

.ssl-main-column {
	min-width: 0;
}

/* ==========================================================================
   6. Section Headers, Lead Article & Article Grid Cards
   ========================================================================== */

/* Serious Section Header Bar */
.ssl-section-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	background: var(--ssl-slate);
	border-bottom: 1px solid #354c5e;
	border-left: 4px solid var(--ssl-yellow);
	border-radius: 5px;
	color: #fff;
	margin-bottom: 18px;
}

.ssl-section-bar h1,
.ssl-section-bar h2,
.ssl-section-bar h3,
.ssl-section-bar p {
	margin: 0 !important;
	color: #fff !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

.ssl-section-bar .ssl-section-sub {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #dce6ee !important;
}

/* Featured Lead Article on Front Page */
.ssl-lead-section {
	margin-bottom: 28px;
}

.ssl-lead-card {
	background: #fafbfc;
	border: 1px solid #c8d1d9;
	border-top: 3px solid var(--ssl-blue);
	border-radius: 6px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(30, 46, 55, 0.05);
}

.ssl-lead-card .wp-block-post-featured-image {
	margin: 0;
}

.ssl-lead-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
	border: 1px solid #cbd3db;
}

/* Component-Driven Container Queries (@container) for Article Cards */
.wp-block-post-template {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.wp-block-post-template > li {
	container-type: inline-size;
	container-name: ssl-card;
}

.ssl-article-card {
	background: #fff;
	border: 1px solid #cbd3db;
	border-top: 2px solid #7890a2;
	border-radius: 5px;
	padding: 16px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 1px 3px rgba(44, 62, 76, 0.04);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ssl-article-card:hover {
	border-color: #9fb3c4;
	border-top-color: var(--ssl-blue);
	box-shadow: 0 6px 16px rgba(44, 62, 76, 0.09);
	transform: translateY(-2px);
}

.ssl-article-card .wp-block-post-featured-image {
	margin: 0 0 12px 0;
	overflow: hidden;
	border-radius: 4px;
}

.ssl-article-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #dce3ea;
	transition: transform 0.3s ease;
}

.ssl-article-card:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

.ssl-article-card .wp-block-post-title {
	margin: 6px 0 8px 0 !important;
	font-size: clamp(1.05rem, 0.96rem + 0.3vw, 1.2rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--ssl-ink);
}

.ssl-article-card .wp-block-post-title a {
	color: #283139;
	text-decoration: none;
}

.ssl-article-card .wp-block-post-title a:hover {
	color: var(--ssl-blue);
	text-decoration: underline;
}

.ssl-article-card .wp-block-post-excerpt {
	margin: 0 0 12px 0 !important;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ssl-muted);
}

.ssl-article-card .wp-block-post-excerpt p {
	margin: 0;
}

.ssl-article-card .wp-block-post-excerpt__more-text {
	margin-top: 8px !important;
}

.ssl-article-card .wp-block-post-excerpt__more-link {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ssl-blue);
}

.ssl-card-meta-footer {
	padding-top: 10px;
	border-top: 1px solid #e6ecf1;
	font-size: 12px;
	color: #647281;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

/* Adapt card layout when placed inside a wide single-column container */
@container ssl-card (min-width: 620px) {
	.ssl-article-card {
		padding: 20px;
	}
}

/* Category & Tag Badges */
.taxonomy-category.wp-block-post-terms a,
.wp-block-post-terms.is-style-ssl-badge a {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--ssl-ice-border);
	border-radius: 3px;
	background: var(--ssl-ice);
	color: #294b65 !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	margin-right: 4px;
	margin-bottom: 2px;
}

.taxonomy-category.wp-block-post-terms a:hover,
.wp-block-post-terms.is-style-ssl-badge a:hover {
	background: var(--ssl-blue);
	border-color: var(--ssl-blue);
	color: #fff !important;
}

.taxonomy-post_tag.wp-block-post-terms a {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #cbd3db;
	border-radius: 3px;
	background: #f0f3f5;
	color: #53616e !important;
	font-size: 12px;
	text-decoration: none !important;
	margin-right: 4px;
	margin-bottom: 4px;
}

.taxonomy-post_tag.wp-block-post-terms a:hover {
	background: #e2e8ed;
	color: #2c3540 !important;
}

/* ==========================================================================
   7. Structured Sidebar Widgets (Categories Tree, Page List Tree & Latest)
   ========================================================================== */

.ssl-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ssl-widget {
	background: #fff;
	border: 1px solid var(--ssl-line);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(44, 62, 76, 0.04);
}

.ssl-widget-header {
	padding: 8px 14px;
	background: var(--ssl-slate);
	border-bottom: 1px solid #354c5e;
	color: #fff;
}

.ssl-widget-header-dark {
	background: var(--ssl-dark);
	border-bottom-color: #30383d;
}

.ssl-widget-title {
	margin: 0 !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

.ssl-widget-body {
	padding: 12px 14px;
	font-size: 13px;
}

/* Hierarchical Category & Page Trees (.ssl-nav-tree) */
.ssl-nav-tree ul,
.ssl-nav-tree .wp-block-categories-list,
.ssl-nav-tree .wp-block-page-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssl-nav-tree li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #edf1f5;
	font-size: 13px;
	line-height: 1.45;
	color: #53616e;
}

.ssl-nav-tree > ul > li:last-child {
	border-bottom: none;
}

.ssl-nav-tree a {
	display: inline-block;
	padding: 7px 4px;
	color: #283139;
	font-weight: 600;
	text-decoration: none;
}

.ssl-nav-tree a:hover,
.ssl-nav-tree .current-cat > a,
.ssl-nav-tree .current_page_item > a {
	color: var(--ssl-blue);
	text-decoration: underline;
}

/* Nested Subcategories & Subpages Indentation */
.ssl-nav-tree ul ul,
.ssl-nav-tree .children,
.ssl-nav-tree .wp-block-navigation__submenu-container {
	padding-left: 14px;
	margin: 0 0 6px 6px;
	border-left: 2px solid #d4dce3;
}

.ssl-nav-tree ul ul li {
	border-bottom: none;
	font-size: 12.5px;
}

.ssl-nav-tree ul ul a {
	padding: 4px 4px;
	font-weight: 400;
	color: #3b4a57;
}

/* Latest Posts List in Sidebar */
.ssl-latest-list .wp-block-latest-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssl-latest-list .wp-block-latest-posts > li {
	padding: 8px 0;
	border-bottom: 1px solid #edf1f5;
}

.ssl-latest-list .wp-block-latest-posts > li:first-child {
	padding-top: 0;
}

.ssl-latest-list .wp-block-latest-posts > li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.ssl-latest-list .wp-block-latest-posts__post-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #283139;
}

.ssl-latest-list .wp-block-latest-posts__post-title:hover {
	color: var(--ssl-blue);
	text-decoration: underline;
}

.ssl-latest-list .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: #647281;
}

/* Sidebar Callout Box (#eaf2f8) */
.ssl-widget-callout {
	background: var(--ssl-ice);
	border-color: var(--ssl-ice-border);
	padding: 16px;
}

.ssl-widget-callout h4 {
	margin: 0 0 6px 0;
	color: #294b65;
}

.ssl-widget-callout p {
	margin: 0 0 12px 0;
	color: #344f66;
	line-height: 1.5;
}

/* ==========================================================================
   8. Single Post, Static Page, Archive & Search Styling
   ========================================================================== */

.ssl-article-surface {
	background: #fff;
	border: 1px solid #c3cfd9;
	border-top: 3px solid var(--ssl-blue);
	border-radius: 5px;
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
	box-shadow: 0 1px 3px rgba(44, 62, 76, 0.04);
}

.ssl-article-header-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid #d9e1e8;
	font-size: 12.5px;
	color: #647281;
}

.ssl-article-content {
	font-size: 15.5px;
	line-height: 1.72;
	color: #2c3540;
}

.ssl-article-content h2 {
	color: #2c3540;
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem);
	margin-top: 1.75em;
	margin-bottom: 0.6em;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ssl-line);
}

.ssl-article-content h3 {
	color: #344f66;
	font-size: clamp(1.12rem, 1rem + 0.4vw, 1.3rem);
	margin-top: 1.4em;
	margin-bottom: 0.5em;
}

.ssl-article-content blockquote,
.wp-block-quote {
	padding: 12px 16px;
	background-color: #eef2f6;
	border: 1px solid #d2dce5;
	border-left: 3px solid #8da2b4;
	border-radius: 3px;
	margin: 1.25em 0;
}

.ssl-article-content blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #3b5368;
	font-style: normal;
}

/* Info Banner for Archive & Search Headers */
.ssl-archive-banner {
	background: var(--ssl-ice);
	border: 1px solid var(--ssl-ice-border);
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 20px;
}

.ssl-archive-banner h1 {
	margin: 0 0 4px 0 !important;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem) !important;
	color: #294b65 !important;
}

.ssl-archive-banner p {
	margin: 0 !important;
	font-size: 13.5px;
	color: #344f66;
}

/* Search Input Styling (Matching Sonnenstaatland CI) */
.wp-block-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	border: none;
	padding: 0;
}

.wp-block-search .wp-block-search__input {
	box-sizing: border-box;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid #b6c6d1 !important;
	border-right: none !important;
	border-radius: 4px 0 0 4px !important;
	font-size: 13px;
	background: #fff;
	color: var(--ssl-ink);
}

.wp-block-search .wp-block-search__button {
	margin: 0 !important;
	padding: 0 12px !important;
	min-height: 34px;
	background: var(--ssl-blue) !important;
	border: 1px solid #35546c !important;
	border-radius: 0 4px 4px 0 !important;
	color: #fff !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.wp-block-search .wp-block-search__button:hover {
	background: var(--ssl-blue-hover) !important;
}

/* Buttons */
.wp-block-button.is-style-ssl-primary .wp-block-button__link {
	background: var(--ssl-blue) !important;
	border: 1px solid #35546c !important;
	color: #fff !important;
	border-radius: 4px !important;
	padding: 7px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.wp-block-button.is-style-ssl-primary .wp-block-button__link:hover {
	background: var(--ssl-blue-hover) !important;
	color: #fff !important;
}

.wp-block-button.is-style-ssl-outline .wp-block-button__link {
	background: #fff !important;
	border: 1px solid #bcc9d3 !important;
	color: #344f66 !important;
	border-radius: 4px !important;
	padding: 7px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.wp-block-button.is-style-ssl-outline .wp-block-button__link:hover {
	background: #f5edda !important;
	border-color: #afc0cc !important;
	color: #2d526f !important;
}

/* Pagination */
.wp-block-query-pagination {
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid var(--ssl-line);
	font-size: 13px;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	background: #fff;
	border: 1px solid #bcc9d3;
	border-radius: 4px;
	color: #344f66;
	font-weight: 600;
	text-decoration: none;
	margin: 0 2px;
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--ssl-blue);
	border-color: var(--ssl-blue);
	color: #fff;
	text-decoration: none;
}

/* Comments Section */
.ssl-comments-box {
	margin-top: 24px;
	background: #f8fafc;
	border: 1px solid #c3cfd9;
	border-radius: 5px;
	padding: 20px;
}

.wp-block-comment-template > li {
	background: #fff;
	border: 1px solid #cbd3db;
	border-top: 2px solid #7890a2;
	border-radius: 4px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.wp-block-post-comments-form input[type="submit"] {
	background: var(--ssl-blue) !important;
	border: 1px solid #35546c !important;
	color: #fff !important;
	border-radius: 4px !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

/* ==========================================================================
   9. Footer (.ssl-site-footer) Matching .wrap Alignment & CI
   ========================================================================== */

.ssl-site-footer {
	box-sizing: border-box;
	width: calc(100% - 64px);
	max-width: 1320px;
	margin: 0 auto 28px auto;
	background: #304c60;
	border-top: 2px solid var(--ssl-yellow);
	border-radius: 7px;
	color: #d9e3ea;
	box-shadow: 0 6px 24px rgba(30, 46, 55, 0.14);
}

.ssl-footer-inner {
	padding: 22px 24px 16px;
}

.ssl-footer-heading {
	margin: 0 0 10px 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #fff !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	padding-bottom: 6px;
}

.ssl-footer-text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #d9e3ea;
}

.ssl-footer-links,
.ssl-footer-list.wp-block-categories-list,
.ssl-footer-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.8;
}

.ssl-footer-links a,
.ssl-footer-list a {
	color: #e4ebf0 !important;
	text-decoration: none;
}

.ssl-footer-links a:hover,
.ssl-footer-list a:hover {
	color: var(--ssl-yellow) !important;
	text-decoration: underline;
}

.ssl-footer-bottom {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 12px;
	color: #b9c9d5;
}

.ssl-footer-copy {
	margin: 0;
}

.ssl-footer-meta-links {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ssl-footer-meta-links a {
	color: #e4ebf0;
	text-decoration: none;
}

.ssl-footer-meta-links a:hover {
	color: var(--ssl-yellow);
	text-decoration: underline;
}

/* ==========================================================================
   10. Exact Responsive Media Queries (Matching phpBB Sonnenstaatland Breakpoints)
   ========================================================================== */

@media (max-width: 1100px) {
	.ssl-top-inner {
		gap: 18px;
	}
	.ssl-utility-bar {
		gap: 16px;
	}
	.ssl-top-header .site_logo {
		width: 96px;
		height: 58px;
	}
	.ssl-top-header .site-description h1 {
		font-size: 17px;
	}
}

@media (max-width: 960px) {
	.ssl-editorial-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.ssl-top-inner {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px 14px;
		width: calc(100% - 40px);
	}
	.ssl-top-header .site-description {
		width: 100%;
	}
	.ssl-utility-bar {
		justify-content: space-between;
		width: 100%;
	}
	.wrap,
	.ssl-site-footer {
		width: calc(100% - 40px);
		margin: 20px auto;
		padding: 16px;
	}
	.ssl-footer-inner {
		padding: 6px 4px;
	}
}

@media (max-width: 700px) {
	.wrap,
	.ssl-site-footer {
		width: calc(100% - 20px);
		min-width: 0;
		margin: 14px auto;
		padding: 12px;
		border-radius: 5px;
	}
	.ssl-top-inner {
		width: calc(100% - 32px);
		padding: 12px 6px;
	}
	.ssl-top-header .site-description {
		gap: 12px;
		text-align: left;
	}
	.ssl-top-header .site-description h1 {
		font-size: 17px;
		text-align: left;
		overflow: visible;
	}
	.ssl-top-header .site-description p {
		font-size: 11px;
		text-align: left;
		overflow: visible;
	}
	.ssl-top-header .site_logo {
		width: 90px;
		height: 54px;
	}
	.ssl-utility-links {
		gap: 14px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.ssl-utility-bar {
		flex-wrap: wrap;
		gap: 8px;
	}
	.ssl-utility-links {
		gap: 12px;
	}
	.ssl-social-links {
		gap: 4px;
		padding-left: 8px;
	}
	.ssl-top-header .ssl-social-link {
		width: 36px;
		height: 36px;
	}
}

@media print {
	body::before,
	.ssl-top-header,
	.ssl-sidebar,
	.ssl-site-footer {
		display: none;
	}
	body {
		min-height: 0;
		background: #fff;
	}
	.wrap {
		width: 100%;
		max-width: none;
		margin: 0;
		border: 0;
		box-shadow: none;
	}
	.ssl-editorial-grid {
		grid-template-columns: 1fr;
	}
}