/* =========================================================================
   Kadence Blocks compatibility shim.

   Some older posts still contain Kadence Blocks markup (rowlayout, column,
   advanced buttons, images). The Kadence THEME that styled them is gone and
   the Kadence Blocks plugin's own CSS isn't loading, so those blocks render
   unstyled. This sheet gives them a clean look inside the dark theme and keeps
   working even after the Kadence Blocks plugin is removed.

   Loaded only on singular views whose content contains `wp-block-kadence`.
   ========================================================================= */

/* Map Kadence's global palette (was defined by the Kadence theme) to the
   theme's dark tokens, so any `has-theme-paletteN-*` class resolves sanely. */
:root {
	--global-palette1: var(--accent);
	--global-palette2: #4a86e8;
	--global-palette3: var(--text);
	--global-palette4: var(--text-muted);
	--global-palette5: var(--text-muted);
	--global-palette6: var(--border-strong);
	--global-palette7: var(--surface);
	--global-palette8: var(--surface-2);
	--global-palette9: var(--bg-deep);
}

/* Palette utility classes (Kadence outputs these; without its CSS they'd be
   no-ops). Light palettes (7/8/9) intentionally map to dark surfaces. */
.has-theme-palette1-background-color { background-color: var(--global-palette1); }
.has-theme-palette2-background-color { background-color: var(--global-palette2); }
.has-theme-palette3-background-color { background-color: var(--surface-2); }
.has-theme-palette4-background-color { background-color: var(--surface-2); }
.has-theme-palette5-background-color { background-color: var(--surface-3); }
.has-theme-palette6-background-color { background-color: var(--surface-3); }
.has-theme-palette7-background-color,
.has-theme-palette8-background-color,
.has-theme-palette9-background-color { background-color: var(--surface); }
.has-theme-palette1-color { color: var(--accent); }
.has-theme-palette7-color,
.has-theme-palette8-color,
.has-theme-palette9-color { color: var(--text); }

/* ---- Row layout --------------------------------------------------------- */
.wp-block-kadence-rowlayout { margin-block: 1.6rem; }
.wp-block-kadence-rowlayout .kt-row-column-wrap {
	display: grid;
	gap: clamp(1rem, .6rem + 1.6vw, 2rem);
	align-items: center;
}
/* Column counts */
.kt-row-column-wrap.kt-has-1-columns { grid-template-columns: 1fr; }
.kt-row-column-wrap.kt-has-2-columns { grid-template-columns: repeat(2, 1fr); }
.kt-row-column-wrap.kt-has-3-columns { grid-template-columns: repeat(3, 1fr); }
.kt-row-column-wrap.kt-has-4-columns { grid-template-columns: repeat(4, 1fr); }
.kt-row-column-wrap.kt-has-5-columns { grid-template-columns: repeat(5, 1fr); }
.kt-row-column-wrap.kt-row-valign-top { align-items: start; }
.kt-row-column-wrap.kt-row-valign-bottom { align-items: end; }

/* Give rows that had a background the dark "card" treatment */
.wp-block-kadence-rowlayout.kt-row-has-bg > .kt-row-column-wrap,
.kb-row-layout-wrap.kt-row-has-bg > .kt-row-column-wrap,
.wp-block-kadence-rowlayout[class*="palette"] > .kt-row-column-wrap {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius, 12px);
	padding: clamp(1.2rem, .8rem + 2vw, 2rem);
}

/* Columns */
.wp-block-kadence-column { min-width: 0; }
.wp-block-kadence-column > .kt-inside-inner-col { height: 100%; }
.kt-inside-inner-col > :last-child { margin-bottom: 0; }

/* Inner horizontal sections (e.g. button + QR side by side) */
.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* ---- Advanced / single buttons ----------------------------------------- */
.wp-block-kadence-advancedbtn.kb-buttons-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-block: .4rem;
}
.kb-button.kt-button,
a.wp-block-kadence-singlebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--text);
	color: var(--bg);
	border: 1px solid var(--text);
	padding: .7rem 1.3rem;
	border-radius: var(--radius-sm, 8px);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .15s ease, background .18s ease, color .18s ease;
}
.kb-button.kt-button:hover,
a.wp-block-kadence-singlebtn:hover { background: var(--white); color: var(--bg); transform: translateY(-1px); }
/* Outline variant */
.kb-button.kb-btn-global-outline {
	background: transparent;
	color: var(--text);
	border-color: var(--border-strong);
}
.kb-button.kb-btn-global-outline:hover { background: var(--surface-2); color: var(--white); }
/* Full-width buttons */
.kb-button.kt-btn-width-type-full,
.kt-btn-width-type-full .kb-button { width: 100%; }
/* Button icon */
.kb-svg-icon-wrap { display: inline-flex; }
.kb-svg-icon-wrap svg { width: 1.1em; height: 1.1em; }

/* ---- Kadence images ----------------------------------------------------- */
.wp-block-kadence-image { margin: 0; }
.wp-block-kadence-image img,
.kb-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius, 12px);
	border: 1px solid var(--border);
}
/* QR codes and small square images shouldn't stretch */
.kb-section-dir-horizontal .wp-block-kadence-image img { max-width: 120px; }

/* ---- Advanced headings -------------------------------------------------- */
.wp-block-kadence-advancedheading { color: inherit; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
	.kt-row-column-wrap.kt-has-2-columns,
	.kt-row-column-wrap.kt-has-3-columns,
	.kt-row-column-wrap.kt-has-4-columns,
	.kt-row-column-wrap.kt-has-5-columns { grid-template-columns: 1fr; }
}