@charset "UTF-8";
/*
Theme Name: Paio Theme
Theme URI: https://paio.nerdpine.com/
Author: Paio
Author URI: https://nerdpine.com/
Description: Paio Theme is a custom block-based, full site editing WordPress theme. Compose your pages with the power of FSE and a wide range of Block Patterns. Customize colors and font pairings to create your own unique look and feel.
Tags: blog, e-commerce, portfolio, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, block-patterns, wide-blocks, full-site-editing, template-editing
Version: 2.3.45
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paio-theme
This theme, like WordPress, is licensed under the GPL.
*/

/* Check other CSS files inside /assets/css/ folder */
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

/* Add horizontal padding to elements */
main > :not(.alignfull),
.sidebar > :not(.alignfull),
main > .wp-block-query > :not(.alignfull),
main .entry-content > :not(.alignfull),
main .entry-content .wp-block-columns.alignfull p,
.woocommerce :not(.related) > ul.products,
.sidebar .wp-block-query > :not(.alignfull),
.sidebar .entry-content > :not(.alignfull),
.sidebar .entry-content .wp-block-columns.alignfull p,
footer > .wp-block-group {
	padding-inline: var(--wp--preset--spacing--40);
}

header > .wp-block-group {
	padding-inline: 0;
}/* =============================================================
   Clash Display @font-face (WordPress not generating from theme.json)
   ============================================================= */
@font-face {
    font-family: "Clash Display";
    src: url("assets/fonts/ClashDisplay-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Display";
    src: url("assets/fonts/ClashDisplay-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Display";
    src: url("assets/fonts/ClashDisplay-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Display";
    src: url("assets/fonts/ClashDisplay-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Provide the CSS custom property WordPress fails to generate */
:root {
    --wp--preset--font-family--clash-display: "Clash Display", Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", sans-serif;
}

/* =============================================================
   PaioClaw Blog — Style additions v2.2.6
   ============================================================= */

/* ── Blog sidebar category pills ─────────────────────────── */
.paio-category-pills ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.paio-category-pills li {
	padding: 0 4px 8px;
}
.paio-category-pills li a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 9999px;
	border: 0.8px solid rgba(255, 255, 255, 0.08);
	font-size: 0.75rem;
	font-weight: 500;
	color: rgb(133, 133, 133);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
	background: transparent;
}
.paio-category-pills li a:hover,
.paio-category-pills li.current-cat a {
	border-color: rgba(255, 140, 42, 0.3);
	color: #ff8c2a;
	background: rgba(255, 140, 42, 0.1);
}

/* ── Post card meta opacity ───────────────────────────────── */
.paio-post-meta { opacity: 0.6; }

/* ── Back to blog link ────────────────────────────────────── */
.paio-back-link a {
	font-size: 0.875rem;
	color: rgba(133, 133, 133, 0.7);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	transition: color 0.15s ease;
}
.paio-back-link a:hover { color: #ff8c2a; }

/* ── Single post: category badge ──────────────────────────── */
.paio-category-badge a {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border-radius: 6px;
	background: rgba(255, 140, 42, 0.1);
	color: #ff8c2a !important;
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	text-transform: capitalize;
}
.paio-category-badge .wp-block-post-terms__separator { display: none; }

/* ── TOC sidebar — dynamic (paio-toc.php) ─────────────────── */
.paio-toc-nav {
	margin-top: 0;
}
.paio-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.paio-toc-item a {
	display: block;
	padding: 6px 12px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.4);
	text-decoration: none;
	line-height: 1.75;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.paio-toc-item a:hover {
	color: rgba(255, 255, 255, 0.75);
}
/* Active section highlight */
.paio-toc-item.is-active > a {
	color: #ff8c2a !important;
	border-left-color: #ff8c2a;
}
.paio-toc-h3 a {
	padding-left: 20px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.3);
}

/* ── Copy button on <pre> blocks ──────────────────────────── */
.paio-copy-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 10px;
	font-size: 0.6875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.06);
	border: 0.8px solid rgba(255, 255, 255, 0.1);
	border-radius: 5px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	font-family: inherit;
	line-height: 1.4;
	z-index: 2;
}
.paio-copy-btn:hover {
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
}
.paio-copy-btn.is-copied {
	color: #4ade80;
	background: rgba(74, 222, 128, 0.08);
	border-color: rgba(74, 222, 128, 0.25);
	opacity: 1;
}

/* ── Single post content typography ──────────────────────── */
.paio-post-content {
	max-width: 740px;
}
.paio-post-content h2 {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;
	font-size: 1.625rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	line-height: 1.333 !important;
	margin-top: 4rem !important;
	margin-bottom: 1.75rem !important;
	scroll-margin-top: 100px;
}
.paio-post-content h3 {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	line-height: 1.556 !important;
	margin-top: 3rem !important;
	margin-bottom: 1.25rem !important;
	scroll-margin-top: 100px;
}
.paio-post-content h4 {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	margin-top: 2rem !important;
	margin-bottom: 1rem !important;
}
.paio-post-content p {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.85;
	margin-bottom: 1.5rem;
}
.paio-post-content strong, .paio-post-content b {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}
.paio-post-content em, .paio-post-content i {
	color: rgba(255, 255, 255, 0.7);
}
.paio-post-content a {
	color: #ff8c2a;
	text-decoration: underline;
	text-decoration-color: rgba(255, 140, 42, 0.35);
	text-underline-offset: 3px;
}
.paio-post-content a:hover { text-decoration-color: #ff8c2a; }
.paio-post-content ul, .paio-post-content ol {
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}
.paio-post-content li {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.75;
	margin-bottom: 0.375rem;
}
.paio-post-content code {
	color: #ff8c2a;
	background: rgba(255, 255, 255, 0.04);
	padding: 0.125rem 0.375rem;
	border-radius: 4px;
	font-size: 0.84375rem;
	font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}
.paio-post-content pre {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
	margin-bottom: 1.5rem;
}
.paio-post-content pre code {
	color: rgba(255, 255, 255, 0.7);
	background: none;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.625;
}
.paio-post-content blockquote {
	border-left: 3px solid #ff8c2a;
	padding-left: 1.25rem;
	margin: 2rem 0;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
}
.paio-post-content img { border-radius: 10px; max-width: 100%; height: auto; }
.paio-post-content hr {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 3rem 0;
}

/* ── Yoast FAQ block (schema-faq) ─────────────────────────── */
.paio-post-content .schema-faq {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.paio-post-content .schema-faq-section {
	display: block;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
}
.paio-post-content .schema-faq-question {
	display: block;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	line-height: 1.5 !important;
	margin-bottom: 0.625rem;
}
.paio-post-content .schema-faq-question::before {
	content: "Q.";
	color: #ff8c2a;
	font-weight: 700;
	margin-right: 0.5rem;
}
.paio-post-content .schema-faq-answer {
	font-size: 0.9375rem !important;
	color: rgba(255, 255, 255, 0.6) !important;
	line-height: 1.75 !important;
	margin: 0 !important;
}

/* ── Pagination ───────────────────────────────────────────── */
.wp-block-query-pagination { gap: 0.375rem; }
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border-radius: 6px;
	font-size: 0.875rem;
	color: rgba(133, 133, 133, 0.7);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: all 0.15s ease;
}
.wp-block-query-pagination-numbers .current {
	background: #ff8c2a;
	color: #0a0a0a;
	border-color: #ff8c2a;
	font-weight: 600;
}
.wp-block-query-pagination-numbers a:hover { border-color: rgba(255,255,255,0.2); color: #f2f2f2; }
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	font-size: 0.875rem;
	color: rgba(133, 133, 133, 0.7);
	text-decoration: none;
	padding: 0.25rem 0.75rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: all 0.15s ease;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover { border-color: rgba(255,255,255,0.2); color: #f2f2f2; }
/* =============================================================
   PaioClaw Featured Image Overlay — paioclaw.ai style
   ============================================================= */

/* ── Shared wrapper (with or without image) ───────────────── */
.paio-featured-wrap {
	position: relative;
	overflow: hidden;
	display: block;
}

.paio-featured-wrap > a,
.paio-featured-wrap > a > img,
.paio-featured-wrap > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Overlay container (sits above the image) ─────────────── */
.paio-img-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
}

/* Orange glow radial gradient */
.paio-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 50% 110%,
		rgba(255, 140, 42, 0.25) 0%,
		transparent 62%
	);
	border-radius: inherit;
}

/* Logo + divider + icon — centered flex row */
.paio-overlay-content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 3.5rem);
	padding: 0 1.5rem;
}

/* PaioClaw site logo (left) */
.paio-overlay-logo {
	height: 24%;
	width: auto;
	max-height: 80px;
	object-fit: contain;
	filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
	opacity: 0.9;
}

/* Vertical white divider */
.paio-overlay-divider {
	display: block;
	width: 1px;
	height: 18%;
	min-height: 24px;
	max-height: 60px;
	background: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

/* Service icon per post (right) — white-filtered SVG/PNG */
.paio-overlay-icon {
	height: 20%;
	width: auto;
	max-height: 68px;
	object-fit: contain;
	filter: brightness(0) invert(1) drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
}

/* ── No-image placeholder ─────────────────────────────────── */
.paio-no-image { 
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	background: #0d0d0d;
	margin: 0;
	min-height: 160px;
	width:100%;
}

.paio-placeholder-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 50% 110%,
		rgba(255, 140, 42, 0.28) 0%,
		transparent 62%
	);
}

/* Solo logo (no service icon) — slightly bigger */
.paio-overlay-content:not(:has(.paio-overlay-divider)) .paio-overlay-logo {
	height: 28%;
}

/* =================================================================
   Featured image: dark bg + orange glow (paioclaw.ai style)
   - No image → dark gradient placeholder shows automatically
   - With image → image displays, glow overlays on top
   ================================================================= */
.wp-block-post-featured-image {
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
    background-image: radial-gradient(
        ellipse at 50% 110%,
        rgba(255, 140, 42, 0.28) 0%,
        transparent 62%
    );
}

.wp-block-post-featured-image img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 50% 110%,
        rgba(255, 140, 42, 0.18) 0%,
        transparent 62%
    );
}

/* === Spacing & layout fixes v2.2.1 === */
.wp-site-blocks > * { margin-block-start: 0 !important; }

.wp-block-columns > .wp-block-column:first-child h1 {
    font-size: 2.25rem !important;
    line-height: 1.111 !important;
}

.wp-block-group.alignfull[style*="spacing--70"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.wp-block-group.alignfull.has-surface-1-background-color {
    background-color: rgb(10, 10, 10) !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.wp-block-group.alignfull.has-surface-1-background-color > .wp-block-group {
    background: rgba(26, 26, 26, 0.6);
    border-radius: 16px;
    padding: 1.5rem 2rem;
}

footer .wp-block-group.alignfull.has-dark-background-color {
    padding-top: 3rem !important;
}

/* ═══════════════════════════════════════════════════════════
   Header: floating glass pill — exact paioclaw.ai style
   ═══════════════════════════════════════════════════════════ */

/* 1. Fix header at top of viewport */
header.wp-block-template-part {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* 2. Outer group — transparent, provides 16px gap above pill + side margins */
header .wp-block-group.alignfull {
    background: transparent !important;
    background-color: transparent !important;
    padding: 1rem 2.5% !important;
}

/* 3. Inner flex row — this becomes the floating glass pill.
   backdrop-filter is on ::before (not the element) to avoid Chrome bug where
   backdrop-filter creates a containing block that traps the fixed nav overlay. */
header .wp-block-group.alignfull > .wp-block-group {
    background: transparent !important;
    border-radius: 16px;
    padding: 0.75rem 1.25rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
header .wp-block-group.alignfull > .wp-block-group::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 0.8px solid rgba(255, 255, 255, 0.06);
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

/* 4. Push page content below fixed header (16px gap + 62px pill + 16px gap = 94px).
   Skip on no-header-footer template pages — they render no fixed header. */
body:not(.page-template-no-header-footer) .wp-site-blocks {
    padding-top: 94px;
}

/* 5. Site title — Clash Display, 700, gradient text to match reference.
   WP renders wp-block-site-title as <p> (no <a> child) so we target
   the element itself and any a child for both cases. */
header .wp-block-site-title {
    font-family: "Clash Display", sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, #FBF9EC 0%, #E8D2B2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
header .wp-block-site-title a {
    font-family: "Clash Display", sans-serif !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, #FBF9EC 0%, #E8D2B2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none !important;
}

/* 6. Nav links — 14px, muted grey */
header .wp-block-navigation a {
    font-size: 0.875rem !important;
    color: rgb(133, 133, 133) !important;
    text-decoration: none;
    transition: var(--rc-tr-colors-150);
}
header .wp-block-navigation a:hover {
    color: #fbf9ec !important;
}

/* 7. Sign up button — keep orange, slightly more compact */
header .wp-block-button__link {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: var(--rc-tr-all-200);
}

/* 8. Site logo — lock to 36px wide */
header .wp-block-site-logo img {
    width: 36px !important;
    height: auto !important;
}

/* 9. Login link + language switcher — muted grey, hover cream (matches live) */
header .paio-login-link {
    font-size: 0.875rem;
    font-weight: 400;
    color: rgb(133, 133, 133);
    text-decoration: none;
    transition: var(--rc-tr-colors-150);
    white-space: nowrap;
}
header .paio-login-link:hover {
    color: #fbf9ec;
}
.paio-lang-switcher {
    position: relative;
    display: inline-flex;
}
.paio-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgb(133, 133, 133);
    transition: color 0.2s ease;
    line-height: 1;
}
.paio-lang-btn:hover {
    color: #fbf9ec;
}
.paio-lang-btn .paio-lang-chevron {
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.paio-lang-btn[aria-expanded="true"] .paio-lang-chevron {
    transform: rotate(180deg);
}
.paio-lang-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 8rem;
    margin: 0;
    padding: 0.375rem;
    list-style: none;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.625rem;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
}
.paio-lang-switcher.is-open .paio-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.paio-lang-dropdown a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.paio-lang-dropdown a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fbf9ec;
}

/* ═══════════════════════════════════════════════════════════
   All remaining fixes v2.2.3
   ═══════════════════════════════════════════════════════════ */

/* FIX 1: Body white background — dark throughout */
html, body {
    background-color: #0a0a0a !important;
}

/* FIX 2: Nav link weight — reference is 400 not 500 */
header .wp-block-navigation a {
    font-weight: 400 !important;
}

/* FIX 3: Nav active / current page highlight.
   Specificity is raised with .wp-block-navigation-item so it beats the generic
   `header .wp-block-navigation a { color: ... !important }` rule regardless of
   source order. */
header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
header .wp-block-navigation .wp-block-navigation-item.current_page_item > a,
header .wp-block-navigation .wp-block-navigation-item a[aria-current="page"] {
    color: #fbf9ec !important;
    position: relative;
    display: inline-flex;
    align-items: center;
}
header .wp-block-navigation a[aria-current="page"]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #ff8c2a;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* FIX 4: Card title (in post grid) — 18px, Plus Jakarta Sans */
.wp-block-post-template .wp-block-post-title,
.wp-block-post-template .wp-block-post-title a {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.556 !important;
    color: #fbf9ec !important;
    text-decoration: none !important;
}
.wp-block-post-template .wp-block-post-title a:hover {
    color: #ff8c2a !important;
}

/* Single post title — Plus Jakarta Sans */
.paio-post-badge-row ~ .wp-block-post-title,
.wp-block-columns .wp-block-post-title:not(.wp-block-post-template *) {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    line-height: 1.111 !important;
    color: #fbf9ec !important;
    margin-bottom: 1.5rem !important;
}

/* FIX 5: Columns gap — increase from 20px to 3rem */
.wp-block-columns.alignwide {
    column-gap: 3rem !important;
    gap: 3rem 3rem !important;
}

/* FIX 6: Sidebar — ensure proper spacing inside sticky group */
.wp-block-columns > .wp-block-column:first-child .wp-block-group {
    gap: 1rem;
}

/* FIX 7: Category pills — hover + active state */
.paio-category-pills li a:hover {
    color: #ff8c2a !important;
    border-color: rgba(255, 140, 42, 0.3) !important;
    background: rgba(255, 140, 42, 0.1) !important;
}
.paio-category-pills li.current-cat > a,
.paio-category-pills li.current-cat a {
    color: #ff8c2a !important;
    border-color: rgba(255, 140, 42, 0.3) !important;
    background: rgba(255, 140, 42, 0.1) !important;
}

/* FIX 8: Featured image — link wrapper must fill the figure so img covers correctly */
.wp-block-post-featured-image {
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
}
.wp-block-post-featured-image > a {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.wp-block-post-featured-image > a > img,
.wp-block-post-featured-image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* FIX 9: White gap between sections — body bg already fixed above,
   also ensure .wp-site-blocks inherits the dark bg */
.wp-site-blocks {
    background-color: #0a0a0a;
    min-height: 100vh;
}

/* FIX 10: Card excerpt color — should be muted with slight opacity */
.wp-block-post-excerpt p,
.wp-block-post-excerpt__excerpt {
    color: rgb(133, 133, 133) !important;
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    opacity: 0.85;
}

/* FIX 11: Card date — small, very muted */
.wp-block-post-date,
.wp-block-post-date time {
    color: rgba(133, 133, 133, 0.6) !important;
    font-size: 0.75rem !important;
}

/* FIX 12: Query pagination — ensure dark bg */
.wp-block-query-pagination {
    background: transparent;
    margin-top: 2rem;
}

/* FIX 13: Footer nav links hover */
footer .wp-block-navigation a:hover,
footer a:hover {
    color: #fbf9ec !important;
    text-decoration: none;
}
footer .wp-block-navigation a {
    color: rgba(133, 133, 133, 0.7);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

/* FIX 14: Footer heading uppercase labels */
footer h6.wp-block-heading {
    color: rgba(133, 133, 133, 0.5) !important;
    letter-spacing: 0.1em;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* FIX 15: Login/Log in link — force muted grey (link has no class, gets orange by default).
   Scoped to nav links only so it never matches the site-title logo link
   (WP renders that <a> with no class, so a bare `header a:not(...)` catch-all
   would otherwise paint the PaioClaw logo grey/black too).
   Excludes the open mobile overlay (.is-menu-open) — that panel has its own
   near-white item color (see "Mobile nav overlay" block below); without this
   exclusion, -webkit-text-fill-color here overrides that color on WebKit
   mobile browsers since color:/-webkit-text-fill-color: always wins over a
   plain `color` declaration for the rendered glyph. */
header a[href*="login"],
header a[href*="log-in"],
header .wp-block-navigation a:not(.wp-block-button__link) {
    color: rgb(133, 133, 133) !important;
    -webkit-text-fill-color: rgb(133, 133, 133) !important;
    text-decoration: none !important;
}
header .wp-block-navigation a:not(.wp-block-button__link):hover {
    color: #fbf9ec !important;
    -webkit-text-fill-color: #fbf9ec !important;
}
/* FIX 15b: Active/current nav link must win over FIX 15's muted grey. */
header .wp-block-navigation a:not(.wp-block-button__link)[aria-current="page"],
header .wp-block-navigation .current-menu-item > a:not(.wp-block-button__link),
header .wp-block-navigation .current_page_item > a:not(.wp-block-button__link) {
    color: #fbf9ec !important;
    -webkit-text-fill-color: #fbf9ec !important;
}
/* FIX 15c: mobile overlay items get their own near-white fill. Must repeat
   the exact `a:not(.wp-block-button__link)` shape FIX 15 uses (not just
   .wp-block-navigation-item__content) so this wins on specificity against
   FIX 15 regardless of which element in the item markup FIX 15 is actually
   painting — FIX 15's -webkit-text-fill-color otherwise wins on WebKit even
   though .wp-block-navigation-item__content's plain `color` is already
   near-white. */
header .wp-block-navigation__responsive-container.is-menu-open
    a.wp-block-navigation-item__content:not(.wp-block-button__link),
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:not(.wp-block-button__link) {
    color: rgba(242, 242, 242, 0.85) !important;
    -webkit-text-fill-color: rgba(242, 242, 242, 0.85) !important;
}
/* Site title (PaioClaw logo text) gradient — not touched by FIX 15/15b above */
header .wp-block-site-title,
header .wp-block-site-title a {
    font-family: "Clash Display", sans-serif !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, #FBF9EC 0%, #E8D2B2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* FIX 16: Sign up button — orange gradient matching reference */
header .wp-block-button__link {
    color: rgb(26, 10, 0) !important;
    -webkit-text-fill-color: rgb(26, 10, 0) !important;
    background: linear-gradient(135deg, #ff8c2a 0%, #e8622a 100%) !important;
    background-color: #ff8c2a !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: opacity 0.2s ease !important;
}
header .wp-block-button__link:hover {
    opacity: 0.9;
}

/* FIX 17: Featured image object-position — center the image composition */
.wp-block-post-featured-image > a > img,
.wp-block-post-featured-image > img {
    object-position: center center !important;
}

/* FIX 19: Blog content inline padding that might affect layout */
main > .wp-block-group.alignfull {
    padding-inline: 0 !important;
}

/* FIX 20: Resources dropdown arrow matches nav style */
header .wp-block-navigation__submenu-icon svg {
    stroke: rgb(133, 133, 133);
}

/* ── Post content: tables ─────────────────────────────────── */
.paio-post-content table,
.paio-post-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.875rem;
    margin: 1.5rem 0;
}
.paio-post-content table th,
.paio-post-content .wp-block-table th {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fbf9ec !important;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.paio-post-content table td,
.paio-post-content .wp-block-table td {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
    line-height: 1.6;
}
.paio-post-content table tr:last-child td {
    border-bottom: none;
}
.paio-post-content .wp-block-table {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Post content: images ─────────────────────────────────── */
.paio-post-content img,
.paio-post-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.paio-post-content figure {
    margin: 1.5rem 0;
}
.paio-post-content figcaption {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
}

/* ── Post content: lists ──────────────────────────────────── */
.paio-post-content ul,
.paio-post-content ol {
    color: rgba(255, 255, 255, 0.6);
    padding-left: 1.5rem;
    margin: 1rem 0;
}
.paio-post-content li {
    font-size: 1.0625rem;
    margin-bottom: 0.4rem;
    line-height: 1.7;
}

/* ── Post content: blockquote ─────────────────────────────── */
.paio-post-content blockquote {
    border-left: 3px solid #ff8c2a;
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 140, 42, 0.05);
    border-radius: 0 6px 6px 0;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

/* ── Post content: links ──────────────────────────────────── */
.paio-post-content a {
    color: #ff8c2a !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 140, 42, 0.4);
    transition: text-decoration-color 0.15s ease;
}
.paio-post-content a:hover {
    text-decoration-color: #ff8c2a;
}

/* ── Post content: inline code ────────────────────────────── */
.paio-post-content code:not(pre code) {
    background: rgba(255, 255, 255, 0.08);
    color: #fbf9ec;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ── v2.2.6: pixel-match post card spacing ───────────────── */

/* Image → info gap: 16px (override blockGap 0.75rem ≈ 12px) */
.wp-block-post .wp-block-post-featured-image {
    margin-bottom: 16px !important;
}

/* Info group inner: category row → title → excerpt → meta */
.wp-block-post .wp-block-post-terms {
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}
.wp-block-post .wp-block-post-title {
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}
.wp-block-post .wp-block-post-excerpt {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}
.wp-block-post .paio-post-meta {
    margin-top: 0 !important;
}

/* Sidebar subtitle paragraph — 14px muted grey */
.wp-block-columns > .wp-block-column:first-child > .wp-block-group > p,
.wp-block-columns > .wp-block-column:first-child .wp-block-paragraph {
    font-size: 0.875rem !important;
    color: rgb(133, 133, 133) !important;
    line-height: 1.5 !important;
}

/* Sidebar "Blog" heading — ensure Plus Jakarta Sans (not Clash) */
.wp-block-columns > .wp-block-column:first-child h1 {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans), system-ui, sans-serif !important;
    font-size: 2.25rem !important;
    line-height: 1.111 !important;
    font-weight: 700 !important;
    color: #fbf9ec !important;
    margin-bottom: 0.5rem !important;
}

/* Post terms (HOW TO tag) in card — orange, 11px, uppercase */
.wp-block-post-terms a {
    color: #ff8c2a !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
}

/* Post excerpt — muted grey, 14px */
.wp-block-post-excerpt p,
.wp-block-post-excerpt__excerpt {
    color: rgb(133, 133, 133) !important;
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    opacity: 1 !important;
}

/* Post date — extra muted */
.wp-block-post-date time {
    color: rgba(133, 133, 133, 0.6) !important;
    font-size: 0.75rem !important;
}

/* Reading time separator dot */
.paio-post-meta .paio-read-time {
    color: rgba(133, 133, 133, 0.4);
    font-size: 0.75rem;
}

/* Ensure query grid uses 2 columns with 20px gap */
ul.wp-block-post-template.is-flex-container.columns-2 {
    gap: 20px !important;
}

/* ── No-image placeholder: centered logo ─────────────────── */
.paio-no-image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.paio-placeholder-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.paio-placeholder-logo .paio-overlay-logo {
    height: 28%;
    width: auto;
    max-height: 72px;
    object-fit: contain;
    opacity: 0.6;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}

/* Featured image: natural display — CSS bg + glow already on figure */
.wp-block-post-featured-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ═══════════════════════════════════════════════════════════ */

/* ── Hamburger toggle icon — match live's 3-line lucide "menu" icon.
   Core ships a 2-bar filled-path icon; live uses a 3-line stroked icon
   (lucide-menu, 20x20, stroke-width 2, rounded caps). Hide core's <svg>
   and draw the 3 bars with a background-image data URI instead, since
   the block's SVG is re-rendered by WP's interactivity runtime and any
   markup we inject would get wiped out on hydration. ── */
.wp-block-navigation__responsive-container-open {
    color: #f2f2f2 !important;
    width: 24px;
    height: 24px;
}
.wp-block-navigation__responsive-container-open svg {
    display: none !important;
}
.wp-block-navigation__responsive-container-open::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'%3E%3C/line%3E%3Cline x1='4' x2='20' y1='6' y2='6'%3E%3C/line%3E%3Cline x1='4' x2='20' y1='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ── Desktop: hide the mobile-only auth group appended into the nav
   container (see paio_mobile_header_auth_menu() in inc/scripts.php).
   Core renders `.wp-block-navigation__responsive-container` inline at
   desktop widths too (nav items live in it), so without this the
   appended Login/Sign up duplicates the real top-bar Login/Sign up. ── */
@media (min-width: 783px) {
    header .paio-mobile-auth-group {
        display: none !important;
    }
}

/* ── Mobile nav overlay — dark glass, inset card matching live
   (live's overlay is a narrower rounded card with visible margin on all
   sides and left-aligned content, not an edge-to-edge center-aligned
   sheet) ── */
header .wp-block-navigation:not(.has-background)
    .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(10, 10, 10, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 1.5rem !important;
    margin: 0.75rem !important;
    border-radius: 1rem !important;
    height: auto !important;
    max-height: calc(100vh - 1.5rem) !important;
    overflow-y: auto !important;
}
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    align-items: flex-start !important;
}
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    align-items: flex-start !important;
    width: 100%;
    /* Desktop nav uses a 1.25rem block-gap for horizontal item spacing;
       inside the mobile overlay that same gap stacks as extra vertical
       space between rows (52px vs live's 32px). Zero it — item padding
       already provides the correct row rhythm. */
    gap: 0 !important;
}
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    width: 100%;
    align-items: flex-start !important;
}
/* `.wp-block-navigation__responsive-container-content` switched from the
   default flex `align-items: stretch` to `flex-start` above (to left-align
   nav item text) — that also shrank `.paio-mobile-auth-group` (a sibling in
   the same flex column) down to its content width. Force it back to full
   width so the Sign up button still spans edge-to-edge like live. ── */
header .wp-block-navigation__responsive-container.is-menu-open
    .paio-mobile-auth-group {
    align-self: stretch !important;
    width: 100%;
}
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    color: rgba(242, 242, 242, 0.85) !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    padding: 0.375rem 0 !important;
    display: block !important;
    text-align: left !important;
}
/* Divider only between TOP-LEVEL items, matching live's grouped look —
   submenu children (e.g. Tutorials/Blog/Community under Resources) sit
   together with no divider between them. */
header .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* Submenu parent label ("Resources") reads as a section header, not a link. */
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu
    > .wp-block-navigation-item__content {
    color: rgba(242, 242, 242, 0.5) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 0.375rem !important;
}
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    padding: 0.375rem 0 !important;
    line-height: 1.25 !important;
}
header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle {
    display: none;
}
header .wp-block-navigation__responsive-container-close,
header .wp-block-navigation__responsive-container-close svg {
    color: #f2f2f2 !important;
    stroke: #f2f2f2 !important;
}

/* ── Login/Sign up appended into the mobile nav overlay (see header inline
   script) — plain Login link + full-width Sign up button, matching live. ── */
.paio-mobile-auth-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* !important required: FIX 15 (`header .wp-block-navigation a:not(.wp-block-button__link)`)
   also matches this link (it's appended inside .wp-block-navigation) and its
   own color/-webkit-text-fill-color are !important, which beats a plain
   declaration regardless of specificity. The extra `header .wp-block-navigation`
   prefix (as FIX 3/16 do above) also raises specificity so this wins on its
   own merits, not just via the !important tie-break. */
header .wp-block-navigation .paio-mobile-auth-group .paio-login-link {
    color: rgba(242, 242, 242, 0.85) !important;
    -webkit-text-fill-color: rgba(242, 242, 242, 0.85) !important;
    font-size: 1rem;
    text-decoration: none !important;
}
/* Two generic rules — `header .wp-block-navigation a { color:...!important }`
   and `header .wp-block-navigation a { font-weight:400 !important }` (see
   "FIX 2" above) — both match this <a> too, since it's appended inside
   .wp-block-navigation. Beat them the same way "FIX 3" does: an extra
   `header .wp-block-navigation` prefix raises specificity so this wins
   regardless of source order, instead of relying on !important alone
   (which ties against the generic rules' own !important). Values below
   matched 1:1 to live's computed styles. ── */
header .wp-block-navigation .paio-mobile-auth-group .paio-mobile-signup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 8px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff6b00, #ff8c2a, #ffaa44);
    color: #1a0a00 !important;
    -webkit-text-fill-color: #1a0a00 !important;
    font-weight: 600 !important;
    font-size: 0.875rem;
    text-decoration: none;
}


/* ── Tablet (≤ 782px): compact header pill ───────────────── */
@media (max-width: 782px) {
    header .wp-block-group.alignfull > .wp-block-group {
        padding: 0.75rem 1.25rem;
        max-width: 100%;
    }
    body:not(.page-template-no-header-footer) .wp-site-blocks {
        padding-top: 80px;
    }
    /* At this width the nav block only holds the hamburger (nav items +
       auth links moved into the overlay/mobile-auth-group). The 3rd flex
       child (top-bar Login/Sign up) collapses to 0×0 once hidden above,
       so without this the nav block — still `justify-content: center` from
       its desktop layout attribute — sits in the middle of the header
       instead of hugging the right edge like live's hamburger does. */
    header .wp-block-navigation {
        margin-left: auto !important;
        flex-grow: 0 !important;
    }
    /* Hide the TOP-BAR Login link + Sign up button on tablet/mobile — matches
       live's hamburger-only top bar. The old `.wp-block-html` wrapper
       selector no longer matches: WP unwraps that block on render, leaving
       .paio-login-link and .wp-block-buttons as direct siblings. */
    header .paio-login-link,
    header .wp-block-buttons {
        display: none !important;
    }
    /* ...except the copy appended into the nav overlay (inc/scripts.php),
       which must stay visible in the open mobile menu. */
    header .paio-mobile-auth-group .paio-login-link,
    header .paio-mobile-auth-group .wp-block-buttons {
        display: block !important;
    }
}

/* ── Mobile (≤ 600px): narrower pill, tighter padding ───── */
@media (max-width: 600px) {
    header .wp-block-group.alignfull {
        padding: 0.625rem 0.875rem !important;
    }
    header .wp-block-group.alignfull > .wp-block-group {
        padding: 0.5rem 0.875rem;
        border-radius: 12px;
        gap: 0.75rem;
    }
    body:not(.page-template-no-header-footer) .wp-site-blocks {
        padding-top: 72px;
    }
    .wp-block-columns > .wp-block-column:first-child h1 {
        font-size: 1.75rem !important;
    }
}

/* ── Mobile (≤ 600px): post grid → single column ─────────── */
@media (max-width: 600px) {
    .wp-block-post-template.is-flex-container.columns-2,
    ul.wp-block-post-template.is-flex-container.columns-2 {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }
    .wp-block-post-template.is-flex-container.columns-2 > li {
        width: 100% !important;
        flex-basis: 100% !important;
        min-width: 100% !important;
    }
}

/* ── Mobile (≤ 600px): blog section horizontal padding ───── */
@media (max-width: 600px) {
    .wp-block-group.alignfull > .wp-block-columns {
        padding-inline: var(--wp--preset--spacing--30) !important;
    }
    .wp-block-group.alignfull > .wp-block-columns > .wp-block-column:first-child {
        margin-bottom: 1.5rem !important;
    }
}

/* ── Mobile (≤ 600px): community CTA stacks cleanly ──────── */
@media (max-width: 600px) {
    .wp-block-group.alignfull .wp-block-group[style*="space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .wp-block-group.alignfull .wp-block-group[style*="space-between"] .wp-block-buttons {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ── Mobile (≤ 600px): footer columns stack ──────────────── */
@media (max-width: 600px) {
    footer .wp-block-columns {
        flex-wrap: wrap !important;
    }
    footer .wp-block-column {
        flex-basis: 100% !important;
        min-width: 100% !important;
    }
    footer .wp-block-column:not(:last-child) {
        margin-bottom: 1.5rem !important;
    }
}

/* ── Mobile (≤ 767px): "Join Our Community" Discord/X buttons go
   full-width and stack, matching live (measured 309.6px wide, 49.6px
   tall, full container width on a 390px viewport) — desktop keeps them
   side-by-side/content-width via the inline flex styles in
   site-footer.php. ── */
@media (max-width: 767px) {
    .paio-footer__community-cta {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }
    .paio-footer__community-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Language switcher — globe + code + dropdown ─────────── */
.paio-lang-switcher {
    position: relative;
    display: inline-flex;
}
.paio-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(133, 133, 133, 0.85);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--rc-tr-colors-150);
    white-space: nowrap;
    line-height: 1;
    font-family: inherit;
}
.paio-lang-btn:hover,
.paio-lang-switcher:focus-within .paio-lang-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #fbf9ec;
}
.paio-lang-code {
    letter-spacing: 0.03em;
}
.paio-lang-chevron {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.paio-lang-switcher:hover .paio-lang-chevron,
.paio-lang-switcher:focus-within .paio-lang-chevron {
    transform: rotate(180deg);
}
/* Bridge fills the gap so moving mouse diagonally doesn't close the dropdown */
.paio-lang-switcher::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 99998;
}
.paio-lang-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: rgba(20, 20, 20, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.625rem;
    padding: 0.3125rem;
    list-style: none;
    margin: 0;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    pointer-events: none;
}
.paio-lang-switcher:hover .paio-lang-dropdown,
.paio-lang-switcher:focus-within .paio-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
    pointer-events: auto;
}
.paio-lang-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.paio-lang-dropdown a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem !important;
    font-weight: 400;
    color: rgba(133, 133, 133, 0.85) !important;
    -webkit-text-fill-color: rgba(133, 133, 133, 0.85) !important;
    text-decoration: none !important;
    border-radius: 0.375rem;
    transition: background 0.1s ease, color 0.1s ease;
    line-height: 1.4;
    white-space: nowrap;
}
.paio-lang-dropdown a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fbf9ec !important;
    -webkit-text-fill-color: #fbf9ec !important;
}
.paio-lang-dropdown .current-lang a {
    color: #fbf9ec !important;
    -webkit-text-fill-color: #fbf9ec !important;
    background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 600px) {
    .paio-lang-switcher { display: none; }
}

/* ── Mobile (≤ 480px): single post content typography ────── */
@media (max-width: 480px) {
    .paio-post-content h2 {
        font-size: 1.25rem !important;
        margin-top: 2.5rem !important;
    }
    .paio-post-content h3 {
        font-size: 1rem !important;
    }
    .paio-post-content pre {
        padding: 1rem;
        font-size: 0.8125rem;
    }
    .wp-block-query-pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.375rem !important;
    }
}



.wp-block-image img {vertical-align: baseline;}