/*
Theme Name: StackLog
Theme URI: https://blog.h0x.eu
Description: Custom design system for StackLog — Notes from the stack. Cloud, M365 & Networking. Child theme of Kadence.
Author: StackLog
Template: kadence
Version: 1.0.1
Text Domain: stacklog
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--sl-bg: #f5f7fb;
	--sl-bg-elevated: #ffffff;
	--sl-bg-soft: #eef1f7;
	--sl-text: #0f172a;
	--sl-text-muted: #56617a;
	--sl-text-faint: #8892a6;
	--sl-border: #e3e7f0;
	--sl-accent: #2563eb;
	--sl-accent-2: #06b6d4;
	--sl-accent-rgb: 37, 99, 235;
	--sl-on-accent: #ffffff;
	--sl-code-bg: #0f1117;
	--sl-code-text: #d9e0ee;
	--sl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--sl-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -14px rgba(15, 23, 42, .18);
	--sl-shadow-lg: 0 20px 60px -20px rgba(15, 23, 42, .28);
	--sl-radius-lg: 20px;
	--sl-radius: 14px;
	--sl-radius-sm: 9px;

	--sl-cat-cloud: #2563eb;
	--sl-cat-netzwerk: #7c3aed;
	--sl-cat-security: #e11d48;
	--sl-cat-tipps: #16a34a;
	--sl-cat-default: #475569;

	--sl-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
	--sl-bg: #080a10;
	--sl-bg-elevated: #10141d;
	--sl-bg-soft: #141a25;
	--sl-text: #e7ecf6;
	--sl-text-muted: #93a0ba;
	--sl-text-faint: #5c6884;
	--sl-border: #212a3a;
	--sl-accent: #5b9dff;
	--sl-accent-2: #22d3ee;
	--sl-accent-rgb: 91, 157, 255;
	--sl-on-accent: #061024;
	--sl-code-bg: #0a0d14;
	--sl-code-text: #d6deeb;
	--sl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--sl-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -16px rgba(0, 0, 0, .75);
	--sl-shadow-lg: 0 24px 70px -20px rgba(0, 0, 0, .8);

	--sl-cat-cloud: #5b9dff;
	--sl-cat-netzwerk: #a78bfa;
	--sl-cat-security: #fb7185;
	--sl-cat-tipps: #4ade80;
	--sl-cat-default: #93a0ba;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]):not([data-theme="dark"]) {
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
	background: var(--sl-bg) !important;
	color: var(--sl-text) !important;
	font-family: var(--sl-font-body);
	transition: background-color .25s ease, color .25s ease;
}

body, input, select, optgroup, textarea { font-family: var(--sl-font-body); }

h1, h2, h3, h4, h5, h6 { color: var(--sl-text) !important; letter-spacing: -0.01em; }

a { color: var(--sl-accent); }

::selection { background: rgba(var(--sl-accent-rgb), .25); }

/* ==========================================================================
   2. Header
   ========================================================================== */

#masthead {
	background: rgba(var(--sl-accent-rgb), 0) !important;
	background-color: color-mix(in srgb, var(--sl-bg-elevated) 88%, transparent) !important;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--sl-border);
	position: sticky;
	top: 0;
	z-index: 999;
	transition: background-color .25s ease, border-color .25s ease;
}

#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .site-top-header-wrap .site-header-row-container-inner,
#masthead .site-bottom-header-wrap .site-header-row-container-inner {
	background: transparent !important;
}

.site-branding .brand { display: inline-flex; align-items: baseline; gap: 2px; }

.site-branding .site-title,
.site-branding .site-title-wrap {
	font-family: var(--sl-font-mono) !important;
	font-weight: 700 !important;
	color: var(--sl-text) !important;
	letter-spacing: -0.02em;
}

.site-branding .site-title::after {
	content: "";
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sl-text-muted) !important;
	position: relative;
	transition: color .18s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a::after {
	content: "";
	position: absolute;
	left: .6em;
	right: .6em;
	bottom: .35em;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--sl-text) !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover::after,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a::after {
	transform: scaleX(1);
}

.main-navigation .lang-item > a { font-family: var(--sl-font-mono); font-size: 12.5px !important; }

/* Theme toggle switch — fixed floating button, bottom-right */
.sl-toggle {
	appearance: none;
	border: 0;
	background: var(--sl-bg-elevated);
	cursor: pointer;
	padding: 5px;
	display: inline-flex;
	align-items: center;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1001;
	border-radius: 999px;
	border: 1px solid var(--sl-border);
	box-shadow: var(--sl-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sl-toggle:hover { transform: translateY(-2px); box-shadow: var(--sl-shadow-lg); }

.sl-toggle-track {
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	position: relative;
	display: inline-block;
	transition: background-color .2s ease;
}

.sl-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sl-bg-elevated);
	border: 1px solid var(--sl-border);
	box-shadow: var(--sl-shadow-sm);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
}

html[data-theme="dark"] .sl-toggle-thumb { transform: translateX(20px); }

@media (max-width: 767px) {
	.sl-toggle { right: 14px; bottom: 14px; }
}

.sl-toggle-thumb .sl-icon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	transition: opacity .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1), color .2s ease;
}

.sl-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); color: #d97706; }
.sl-icon-moon { opacity: 0; transform: rotate(-90deg) scale(.4); color: var(--sl-text-muted); }

html[data-theme="dark"] .sl-icon-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="dark"] .sl-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); color: #c2c9d6; }

/* ==========================================================================
   3. Hero (blog home)
   ========================================================================== */

.sl-hero {
	position: relative;
	overflow: hidden;
	padding: 4.5rem 1.5rem 3rem;
	margin-bottom: 1rem;
	text-align: center;
	background: var(--sl-bg);
}

.sl-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--sl-text) 6%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--sl-text) 6%, transparent) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, black 40%, transparent 90%);
	-webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, black 40%, transparent 90%);
}

.sl-hero-glow {
	position: absolute;
	top: -180px;
	left: 50%;
	transform: translateX(-50%);
	width: 640px;
	height: 420px;
	background: radial-gradient(ellipse at center, rgba(var(--sl-accent-rgb), .35), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}

.sl-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }

.sl-hero-kicker {
	font-family: var(--sl-font-mono);
	font-size: 13px;
	color: var(--sl-accent-2);
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .45em .9em;
	border-radius: 999px;
	margin: 0 0 1.4rem;
}

.sl-prompt { color: var(--sl-accent); font-weight: 700; }

.sl-cursor { animation: sl-blink 1.1s steps(1) infinite; color: var(--sl-accent-2); }

@keyframes sl-blink { 50% { opacity: 0; } }

.sl-hero-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
	line-height: 1.08 !important;
	margin: 0 0 .8rem !important;
	font-weight: 800 !important;
}

.sl-accent-text {
	background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sl-hero-sub {
	font-size: 1.08rem;
	color: var(--sl-text-muted);
	max-width: 46ch;
	margin: 0 auto 2rem;
}

.sl-hero-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.sl-filter-pill {
	font-family: var(--sl-font-mono);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--sl-border);
	background: var(--sl-bg-elevated);
	color: var(--sl-text-muted);
	padding: .5em 1.1em;
	border-radius: 999px;
	cursor: pointer;
	transition: all .18s ease;
}

.sl-filter-pill:hover { border-color: var(--sl-accent); color: var(--sl-text); }

.sl-filter-pill.is-active {
	background: var(--sl-cat-color, var(--sl-accent));
	border-color: var(--sl-cat-color, var(--sl-accent));
	color: #fff;
}

/* ==========================================================================
   4. Post grid / cards
   ========================================================================== */

#primary, .content-area, .site-main, #main { background: var(--sl-bg) !important; }

.kadence-posts-list.grid-cols { gap: 1.6rem !important; }

.entry.loop-entry {
	background: var(--sl-bg-elevated) !important;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-lg) !important;
	box-shadow: var(--sl-shadow) !important;
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.entry.loop-entry:hover {
	transform: translateY(-4px);
	box-shadow: var(--sl-shadow-lg) !important;
	border-color: color-mix(in srgb, var(--sl-accent) 40%, var(--sl-border));
}

.entry.loop-entry .entry-content-wrap { padding: 1.7rem !important; }

.entry-taxonomies .category-links a {
	font-family: var(--sl-font-mono);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .3em .7em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sl-cat-color, var(--sl-cat-default)) 14%, transparent);
	color: var(--sl-cat-color, var(--sl-cat-default));
}

.category-link-cloud { --sl-cat-color: var(--sl-cat-cloud); }
.category-link-netzwerk { --sl-cat-color: var(--sl-cat-netzwerk); }
.category-link-security { --sl-cat-color: var(--sl-cat-security); }
.category-link-tipps { --sl-cat-color: var(--sl-cat-tipps); }

article.category-cloud { --sl-cat-color: var(--sl-cat-cloud); }
article.category-netzwerk { --sl-cat-color: var(--sl-cat-netzwerk); }
article.category-security { --sl-cat-color: var(--sl-cat-security); }
article.category-tipps { --sl-cat-color: var(--sl-cat-tipps); }

.entry.loop-entry .entry-title { font-size: 1.28rem !important; margin: .6rem 0 .5rem !important; }

.entry.loop-entry .entry-title a { color: var(--sl-text) !important; transition: color .15s ease; }
.entry.loop-entry .entry-title a:hover { color: var(--sl-cat-color, var(--sl-accent)) !important; }

.entry-meta { color: var(--sl-text-faint) !important; font-size: 13px; }
.entry-meta .meta-label { display: none; }

.entry-summary p { color: var(--sl-text-muted) !important; font-size: 15px; line-height: 1.65; }

.post-more-link {
	font-family: var(--sl-font-mono);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sl-cat-color, var(--sl-accent)) !important;
	display: inline-flex;
	align-items: center;
	gap: .35em;
}

.post-more-link svg { transition: transform .18s ease; }
.entry.loop-entry:hover .post-more-link svg { transform: translateX(4px); }

.sl-hidden-by-filter { display: none !important; }

/* ==========================================================================
   5. Single post
   ========================================================================== */

.entry.single-entry {
	background: var(--sl-bg-elevated) !important;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-lg) !important;
	box-shadow: var(--sl-shadow) !important;
}

.single-entry .entry-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important; }

.single-entry .entry-content, .entry-content.single-content {
	color: var(--sl-text) !important;
	font-size: 17px;
	line-height: 1.75;
}

.entry-content a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sl-accent) 50%, transparent); text-underline-offset: 3px; }

#sl-progress-bar {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
	z-index: 1000;
	transition: width .1s linear;
}

.sl-toc {
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	padding: 1rem 1.3rem;
	margin: 0 0 2rem;
}

.sl-toc-toggle {
	width: 100%;
	background: transparent;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--sl-font-mono);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sl-text-muted);
	cursor: pointer;
	padding: 0;
}

.sl-toc-chevron { transition: transform .2s ease; }
.sl-toc.is-collapsed .sl-toc-chevron { transform: rotate(-90deg); }

.sl-toc-list { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.sl-toc.is-collapsed .sl-toc-list { display: none; }

.sl-toc-list a {
	color: var(--sl-text-muted);
	text-decoration: none;
	font-size: 14.5px;
	border-left: 2px solid var(--sl-border);
	padding-left: .8em;
	display: block;
	transition: color .15s ease, border-color .15s ease;
}

.sl-toc-list li[data-level="3"] a { padding-left: 1.8em; font-size: 13.5px; }

.sl-toc-list a:hover, .sl-toc-list a.is-active {
	color: var(--sl-accent);
	border-color: var(--sl-accent);
}

/* Code blocks */
.entry-content pre,
.entry-content .wp-block-code {
	background: var(--sl-code-bg) !important;
	border: 1px solid color-mix(in srgb, var(--sl-code-text) 12%, transparent);
	border-radius: var(--sl-radius) !important;
	padding: 1.2rem 1.3rem !important;
	overflow-x: auto;
	position: relative;
}

.entry-content pre code, .entry-content code {
	font-family: var(--sl-font-mono) !important;
	color: var(--sl-code-text) !important;
	font-size: 14px;
}

.entry-content :not(pre) > code {
	background: color-mix(in srgb, var(--sl-accent) 12%, transparent);
	color: var(--sl-accent) !important;
	padding: .15em .4em;
	border-radius: 5px;
}

.sl-code-wrap { position: relative; }

.sl-copy-btn {
	position: absolute;
	top: .7rem;
	right: .7rem;
	font-family: var(--sl-font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--sl-code-text);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 7px;
	padding: .35em .7em;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease, background .15s ease;
}

.sl-code-wrap:hover .sl-copy-btn { opacity: 1; }
.sl-copy-btn:hover { background: rgba(255, 255, 255, .14); }
.sl-copy-btn.is-copied { color: var(--sl-accent-2); border-color: var(--sl-accent-2); opacity: 1; }

.sl-reading-time {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-family: var(--sl-font-mono);
	font-size: 12.5px;
	color: var(--sl-text-faint);
}

.sl-reading-time::before { content: "⏱"; }

/* ==========================================================================
   6. Comments, search, footer
   ========================================================================== */

.comment-respond, #commentform textarea#comment,
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"] {
	background: var(--sl-bg-elevated) !important;
	color: var(--sl-text) !important;
	border-color: var(--sl-border) !important;
}

.comment-respond { background: var(--sl-bg-soft) !important; }

.wp-block-search__input {
	background: var(--sl-bg-elevated) !important;
	color: var(--sl-text) !important;
	border-color: var(--sl-border) !important;
}

.site-footer, .site-footer .site-footer-wrap, #colophon {
	background: var(--sl-code-bg) !important;
	border-top: 1px solid color-mix(in srgb, var(--sl-code-text) 10%, transparent);
}

.site-footer, .site-footer a, .site-footer p { color: color-mix(in srgb, var(--sl-code-text) 85%, transparent) !important; }

.site-footer a:hover { color: var(--sl-accent-2) !important; }

.footer-social-wrap .social-button {
	transition: transform .18s ease, background-color .18s ease;
}

.footer-social-wrap .social-button:hover { transform: translateY(-3px); }

/* ==========================================================================
   7. Motion & accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

a:focus-visible, button:focus-visible, .sl-toggle:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   8. Page hero banner (e.g. "Blog-Übersicht")
   ========================================================================== */

.entry-hero.page-hero-section {
	background: var(--sl-bg-soft) !important;
	border-bottom: 1px solid var(--sl-border);
	position: relative;
	overflow: hidden;
}

.entry-hero.page-hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--sl-text) 5%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--sl-text) 5%, transparent) 1px, transparent 1px);
	background-size: 38px 38px;
	mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, black 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, black 30%, transparent 85%);
}

.entry-hero-container-inner, .hero-section-overlay {
	background: transparent !important;
}

.entry-hero.page-hero-section .hero-container {
	position: relative;
	padding: 3.2rem 0 !important;
}

.entry-hero.page-hero-section .entry-title {
	font-family: var(--sl-font-mono) !important;
	font-size: clamp(1.7rem, 3.6vw, 2.3rem) !important;
	font-weight: 700 !important;
	margin: 0 !important;
}

.entry-hero.page-hero-section .entry-title::before {
	content: "$ ";
	color: var(--sl-accent);
}

/* ==========================================================================
   9. Search + category toolbar (Gutenberg search/categories blocks)
   ========================================================================== */

.entry-content .wp-block-columns:has(.wp-block-search),
.entry-content .wp-block-columns:has(.wp-block-categories) {
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	padding: 1.2rem 1.4rem !important;
	margin: 0 0 2.2rem !important;
	align-items: end !important;
}

.entry-content .wp-block-search__label,
.entry-content .wp-block-categories__label {
	font-family: var(--sl-font-mono);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sl-text-faint) !important;
	margin: 0 0 .5rem;
	display: block;
}

.entry-content .wp-block-search__inside-wrapper {
	border: 1px solid var(--sl-border) !important;
	border-radius: var(--sl-radius-sm) !important;
	overflow: hidden;
	background: var(--sl-bg-elevated);
	gap: 0 !important;
}

.entry-content .wp-block-search__input {
	border: none !important;
	border-radius: 0 !important;
	background: var(--sl-bg-elevated) !important;
	color: var(--sl-text) !important;
	flex: 1;
	min-width: 0;
	padding: .7em .9em !important;
}

.entry-content .wp-block-search__input::placeholder { color: var(--sl-text-faint); }

.entry-content .wp-block-search__button {
	border-radius: 0 !important;
	border: none !important;
	background: var(--sl-accent) !important;
	color: var(--sl-on-accent) !important;
	font-weight: 700 !important;
	padding: .7em 1.3em !important;
	margin: 0 !important;
}

.entry-content .wp-block-search__button:hover { background: var(--sl-accent-2) !important; }

.entry-content select.postform,
.entry-content .wp-block-categories-dropdown select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: var(--sl-bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2356617a' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right .9em center !important;
	background-size: 12px !important;
	color: var(--sl-text) !important;
	border: 1px solid var(--sl-border) !important;
	border-radius: var(--sl-radius-sm) !important;
	padding: .72em 2.2em .72em .9em !important;
	font-family: var(--sl-font-body);
	font-size: 14.5px;
}

.entry-content select.postform:focus,
.entry-content .wp-block-search__input:focus {
	outline: none;
	border-color: var(--sl-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--sl-accent-rgb), .18);
}

/* ==========================================================================
   10. Comment form
   ========================================================================== */

.comment-respond {
	padding: 1.8rem !important;
	border-radius: var(--sl-radius-lg) !important;
}

.comment-reply-title {
	font-family: var(--sl-font-mono) !important;
	font-size: 1.15rem !important;
	color: var(--sl-text) !important;
	margin: 0 0 .3rem !important;
	display: flex;
	align-items: baseline;
	gap: .6em;
}

.comment-reply-title small a { font-size: 13px; color: var(--sl-accent); }

.comment-notes {
	display: block;
	color: var(--sl-text-faint) !important;
	font-size: 13.5px;
	margin: 0 0 1.4rem !important;
	line-height: 1.6;
}

.comment-notes span { display: inline; }
.comment-notes .required-field-message { display: block; margin-top: .15em; }
.comment-notes .required { color: var(--sl-cat-security); }

/* Only the form's direct-child paragraphs get spacing here — the
   author/email/url fields live inside .comment-input-wrap and keep
   Kadence's own grid + spacing so its floating-label math stays intact. */
#commentform > p { margin: 0 0 1.1rem !important; }

#commentform textarea#comment,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
	width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#commentform textarea#comment:focus,
#commentform input:focus {
	outline: none;
	border-color: var(--sl-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--sl-accent-rgb), .18);
}

#commentform label.float-label {
	color: var(--sl-text-muted) !important;
	font-size: 13.5px;
	font-weight: 500;
}

#commentform input:focus + label.float-label,
#commentform textarea:focus + label.float-label {
	color: var(--sl-accent) !important;
}

.comment-form-cookies-consent {
	display: flex !important;
	align-items: center;
	gap: .5em;
	font-size: 13px;
	color: var(--sl-text-faint) !important;
}

.comment-form-cookies-consent label { margin: 0 !important; }

#commentform .form-submit { margin-top: .4rem !important; }

#commentform #submit {
	width: 100%;
}


/* ==========================================================================
   11. Footer refresh
   ========================================================================== */

.site-footer {
	position: relative;
	padding-top: 1rem;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sl-accent), var(--sl-accent-2), transparent);
}

.site-bottom-footer-inner-wrap {
	align-items: center !important;
}

.sl-footer-brand {
	display: block;
	font-family: var(--sl-font-mono);
	font-weight: 700;
	font-size: 15px;
	color: color-mix(in srgb, var(--sl-code-text) 95%, transparent) !important;
	letter-spacing: -.02em;
}

.sl-footer-tagline {
	display: block;
	font-size: 12.5px;
	color: color-mix(in srgb, var(--sl-code-text) 55%, transparent) !important;
	margin: .25em 0 .6em;
}

.sl-footer-copy {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: 12px;
	color: color-mix(in srgb, var(--sl-code-text) 45%, transparent) !important;
}

.footer-social-wrap .footer-social-inner-wrap { gap: .6em !important; }

.footer-social-wrap .social-button {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .06) !important;
	color: color-mix(in srgb, var(--sl-code-text) 85%, transparent) !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
}

.footer-social-wrap .social-button:hover {
	background: var(--sl-accent) !important;
	border-color: var(--sl-accent) !important;
	color: var(--sl-on-accent) !important;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.sl-hero { padding: 3rem 1.2rem 2rem; }
	.entry.loop-entry .entry-content-wrap { padding: 1.3rem !important; }
	.entry-content .wp-block-columns:has(.wp-block-search),
	.entry-content .wp-block-columns:has(.wp-block-categories) { padding: 1rem !important; }
}