@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.11
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.75rem;
	color: rgba(255, 255, 255, 0.4);
	text-decoration: none;
	line-height: 1.5;
	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.6875rem;
	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 h2 {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;
	font-size: 1.5rem !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.125rem !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: 0.9375rem;
	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: 0.9375rem;
	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;
}

/* ── 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) */
.wp-site-blocks {
    padding-top: 94px;
}

/* 5. Site title — 20px 700, gradient text to match reference */
header .wp-block-site-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}
header .wp-block-site-title a {
    background: linear-gradient(to right, #fbf9ec 50%, rgba(133,133,133,0.8) 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: color 0.2s ease;
}
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;
}

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

/* ═══════════════════════════════════════════════════════════
   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 */
header .wp-block-navigation .current-menu-item > a,
header .wp-block-navigation .current_page_item > a,
header .wp-block-navigation a[aria-current="page"] {
    color: #fbf9ec !important;
    position: relative;
}
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: clamp(1.75rem, 3vw, 2.25rem) !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) */
header a[href*="login"],
header a[href*="log-in"],
header a:not(.custom-logo-link):not(.wp-block-button__link):not(.wp-block-site-title__link) {
    color: rgb(133, 133, 133) !important;
    -webkit-text-fill-color: rgb(133, 133, 133) !important;
    text-decoration: none !important;
}
header a:not(.custom-logo-link):not(.wp-block-button__link):not(.wp-block-site-title__link):hover {
    color: #fbf9ec !important;
    -webkit-text-fill-color: #fbf9ec !important;
}
/* Restore gradient on site title specifically */
header .wp-block-site-title a {
    background: linear-gradient(to right, #fbf9ec 50%, rgba(133,133,133,0.8) 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 {
    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 — always light ────────────────── */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-open svg {
    color: #f2f2f2 !important;
    stroke: #f2f2f2 !important;
    fill: #f2f2f2 !important;
}

/* ── Mobile nav overlay — dark glass ────────────────────── */
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;
}
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;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: block !important;
}
header .wp-block-navigation__responsive-container-close,
header .wp-block-navigation__responsive-container-close svg {
    color: #f2f2f2 !important;
    stroke: #f2f2f2 !important;
}

/* ── Tablet (≤ 782px): compact header pill ───────────────── */
@media (max-width: 782px) {
    header .wp-block-group.alignfull > .wp-block-group {
        padding: 0.625rem 1rem;
        max-width: 100%;
    }
    .wp-site-blocks {
        padding-top: 80px;
    }
    /* Hide Login link on tablet — appears in hamburger overlay */
    header .wp-block-html {
        display: none !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;
    }
    .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;
    }
}

/* ── 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: background 0.15s ease, color 0.15s ease;
    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;
    }
}