/*
Theme Name: Kado
Theme URI: https://example.com/kado
Author: Kado Digital
Author URI: https://example.com
Description: Child theme modern dan eksklusif dari Twenty Twenty-Five untuk platform dan portal undangan digital. Mengusung konsep modern tech & wedding elegance dengan floating glassmorphic header, soft aurora glows, dan tipografi modern yang presisi.
Version: 1.2.1
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kado
Template: twentytwentyfive
Tags: blog, one-column, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* =====================================================
   1. ROOT VARIABLES & GLOBAL RESETS
   ===================================================== */

:root {
	--kado-primary: #7C3AED;
	--kado-primary-hover: #6D28D9;
	--kado-indigo: #4F46E5;
	--kado-cyan: #06B6D4;
	--kado-rose: #F43F5E;
	--kado-surface: #FFFFFF;
	--kado-surface-soft: #F8FAFC;
	--kado-text-heading: #0F172A;
	--kado-text-body: #334155;
	--kado-text-muted: #64748B;
	--kado-border: rgba(124, 58, 237, 0.12);
	--kado-border-light: rgba(15, 23, 42, 0.08);
	--kado-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
	--kado-shadow-md: 0 10px 25px -4px rgba(15, 23, 42, 0.07), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
	--kado-shadow-lg: 0 20px 40px -6px rgba(15, 23, 42, 0.1), 0 8px 16px -6px rgba(15, 23, 42, 0.04);
	--kado-shadow-glow: 0 14px 35px rgba(124, 58, 237, 0.22);
	--kado-radius-sm: 10px;
	--kado-radius-md: 16px;
	--kado-radius-lg: 24px;
	--kado-radius-full: 9999px;
	--kado-admin-bar-offset: 0px;
}

body.admin-bar {
	--kado-admin-bar-offset: 32px;
}

@media (max-width: 781px) {
	body.admin-bar {
		--kado-admin-bar-offset: 46px;
	}
}

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
}

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: var(--wp--preset--font-family--manrope, "Manrope", sans-serif);
	color: var(--wp--preset--color--contrast, #0F172A);
	background-color: var(--wp--preset--color--base, #FFFFFF);
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent-1, #7C3AED);
	color: #FFFFFF;
}

/* =====================================================
   2. PROFESSIONAL STICKY HEADER (Desktop)
   ===================================================== */

.wp-site-blocks {
	overflow: visible !important;
}

.wp-block-template-part:has(.kado-header-wrapper),
header.wp-block-template-part,
.kado-header-wrapper {
	position: sticky;
	top: var(--kado-admin-bar-offset, 0px);
	z-index: 9999;
}

.kado-header-wrapper {
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid transparent;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.3s ease;
}

.kado-header {
	margin-inline: auto;
	padding: 0.8rem clamp(1rem, 4vw, 2.25rem);
	gap: 2rem;
	align-items: center;
	transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll state */
.kado-header-wrapper.is-scrolled {
	background: rgba(255, 255, 255, 0.96);
	border-bottom-color: var(--wp--preset--color--accent-6, rgba(15, 23, 42, 0.08));
	box-shadow: 0 6px 24px -12px rgba(15, 23, 42, 0.18);
}

.kado-header-wrapper.is-scrolled .kado-header {
	padding-block: 0.55rem;
}

/* Hilangkan jarak block-gap default antara header dan konten berikutnya */
.wp-site-blocks>.kado-hero,
.wp-site-blocks>main,
.wp-site-blocks>main+* {
	margin-block-start: 0 !important;
}

/* Saat menu mobile terbuka, matikan backdrop-filter pada wrapper.
   backdrop-filter pada ancestor membuat containing block baru sehingga
   menu yang position:fixed tidak bisa memenuhi layar. */
.kado-header-wrapper:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Brand area */
.kado-header__brand {
	white-space: nowrap;
	flex-shrink: 0;
	min-width: 0;
	gap: 0.7rem !important;
}

.kado-logo-mark .wp-block-site-logo img,
.kado-logo-mark .custom-logo {
	display: block;
	border-radius: 9px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.kado-header__brand .wp-block-site-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0;
}

.kado-header__brand .wp-block-site-title a {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.kado-header__brand .wp-block-site-title a:hover {
	opacity: 0.85;
}

/* Desktop Navigation - Clean links with hover underline */
.kado-nav {
	margin: 0;
}

.kado-nav .wp-block-navigation__container {
	gap: 0.25rem !important;
	align-items: center;
}

.kado-nav .wp-block-navigation-item>a {
	position: relative;
	padding: 0.3rem 0.85rem !important;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-muted, #475569);
	border-radius: 8px;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.kado-nav .wp-block-navigation-item>a::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.3rem;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.kado-nav .wp-block-navigation-item>a:hover {
	color: var(--wp--preset--color--accent-1, #7C3AED);
}

.kado-nav .wp-block-navigation-item>a:hover::after,
.kado-nav .wp-block-navigation-item.current-menu-item>a::after {
	transform: scaleX(1);
}

.kado-nav .wp-block-navigation-item.current-menu-item>a {
	color: var(--wp--preset--color--accent-1, #7C3AED);
}

.kado-nav .wp-block-navigation-item>a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #7C3AED);
	outline-offset: 2px;
}

/* CTA Header: Masuk + Buat Undangan */
.kado-header__cta {
	flex-shrink: 0;
	margin: 0 !important;
	min-width: 0;
	gap: 1.25rem !important;
	align-items: center !important;
}

.kado-header__login {
	margin: 0 !important;
	font-size: 0.9375rem;
	font-weight: 700;
	white-space: nowrap;
}

.kado-header__login a {
	color: var(--wp--preset--color--contrast-muted, #64748B);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kado-header__login a:hover {
	color: var(--wp--preset--color--accent-1, #7C3AED);
}

.kado-header-btn .wp-block-button__link {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%) !important;
	color: #FFFFFF !important;
	border-radius: 10px !important;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.6rem 1.3rem !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.kado-header-btn .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(124, 58, 237, 0.32);
	filter: brightness(1.05);
}

.kado-header-btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #7C3AED);
	outline-offset: 2px;
}

/* =====================================================
   PROFESSIONAL MOBILE NAVIGATION (< 782px)
   ===================================================== */

@media (min-width: 782px) {
	.kado-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	.kado-nav .wp-block-navigation__responsive-container {
		position: static !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		display: flex !important;
		align-items: center;
	}

	.kado-nav .wp-block-navigation__responsive-container.hidden-by-default {
		display: flex !important;
	}

	.kado-nav .wp-block-navigation__responsive-container-content {
		display: flex !important;
		align-items: center;
	}

	.kado-nav .wp-block-navigation__responsive-close,
	.kado-nav .wp-block-navigation__responsive-dialog {
		display: contents;
	}

	.kado-nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}
}

@media (max-width: 781px) {
	.kado-header {
		padding: 0.6rem 0.9rem;
		gap: 0.5rem;
	}

	.kado-header__brand .wp-block-site-title {
		font-size: 1.05rem;
	}

	.kado-header__login {
		display: none !important;
	}

	/* Susun ulang urutan: brand -> tombol CTA -> hamburger (paling kanan) */
	.kado-header__brand {
		order: 1;
		flex: 1 1 auto;
	}

	.kado-header__cta {
		order: 2;
		flex-shrink: 0;
		margin: 0 0.5rem 0 0 !important;
	}

	.kado-header-btn .wp-block-button__link {
		padding: 0.55rem 0.9rem !important;
		font-size: 0.85rem;
	}

	.kado-nav {
		order: 3;
		margin-left: auto;
		flex-shrink: 0;
	}

	/* Hamburger Button */
	.kado-nav .wp-block-navigation__responsive-container-open {
		width: 40px;
		height: 40px;
		justify-content: center;
		align-items: center;
		display: inline-flex !important;
		border: 1px solid rgba(15, 23, 42, 0.12);
		border-radius: 10px;
		background: #FFFFFF;
		color: var(--wp--preset--color--contrast, #0F172A);
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	.kado-nav .wp-block-navigation__responsive-container-open svg {
		fill: currentColor;
	}

	.kado-nav .wp-block-navigation__responsive-container-open:hover {
		background: var(--wp--preset--color--accent-1, #7C3AED);
		color: #FFFFFF;
		border-color: var(--wp--preset--color--accent-1, #7C3AED);
	}

	.kado-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* Mobile Menu Drawer (slide-in dari kanan, memenuhi tinggi layar) */
	.kado-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: var(--kado-admin-bar-offset, 0px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: calc(100% - var(--kado-admin-bar-offset, 0px)) !important;
		height: calc(100dvh - var(--kado-admin-bar-offset, 0px)) !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch;
		justify-content: flex-end;
		background: rgba(15, 23, 42, 0.34) !important;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		z-index: 100000;
		padding: 0;
		animation: kado-overlay-fade 0.25s ease;
	}

	/* Biarkan dialog menjadi flex-item langsung agar drawer benar-benar di kanan */
	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		display: contents !important;
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: relative;
		width: min(86vw, 340px);
		height: 100%;
		max-height: 100%;
		align-self: stretch;
		margin: 0;
		background: #FFFFFF;
		padding: 0;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: -20px 0 50px -15px rgba(15, 23, 42, 0.2);
		animation: kado-drawer-slide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* Header drawer: brand/menu + tombol tutup, tanpa ruang kosong */
	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: "Menu";
		flex: 0 0 auto;
		font-size: 0.75rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--contrast-muted, #64748B);
		padding: 1.25rem 1.25rem 0.5rem;
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 14px;
		right: 14px;
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--wp--preset--color--accent-5, #F8FAFC);
		border: 1px solid rgba(15, 23, 42, 0.08);
		color: var(--wp--preset--color--contrast, #0F172A);
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
		background: var(--wp--preset--color--accent-2, #F3EEFF);
		color: var(--wp--preset--color--accent-1, #7C3AED);
	}

	/* Konten item mengisi sisa tinggi drawer */
	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	/* Items dalam Drawer */
	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		margin: 0;
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.3rem 1rem !important;
		font-size: 1.05rem;
		font-weight: 600;
		color: var(--wp--preset--color--contrast, #0F172A);
		border-bottom: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: 0;
		background: transparent;
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a::after {
		content: "→";
		position: static;
		background: none;
		width: auto;
		height: auto;
		transform: none;
		font-size: 1.1rem;
		color: var(--wp--preset--color--accent-1, #7C3AED);
		transition: transform 0.2s ease;
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a:hover {
		color: var(--wp--preset--color--accent-1, #7C3AED);
		background: var(--wp--preset--color--accent-2, #F3EEFF);
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a:hover::after {
		transform: translateX(4px);
	}

	.kado-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item>a {
		color: var(--wp--preset--color--accent-1, #7C3AED);
	}
}

@keyframes kado-overlay-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes kado-drawer-slide {
	from {
		opacity: 0.6;
		transform: translateX(40px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* =====================================================
   3. HERO SECTION & AURORA GLOW
   ===================================================== */

.kado-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--base, #FFFFFF);
	padding-top: clamp(2rem, 4vw, 3.5rem) !important;
	/* Ruang napas di bawah sticky header */
}

.kado-hero::before,
.kado-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.kado-hero::before {
	width: 600px;
	height: 600px;
	top: -220px;
	left: -160px;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, rgba(79, 70, 229, 0.08) 50%, transparent 75%);
	filter: blur(80px);
}

.kado-hero::after {
	width: 550px;
	height: 550px;
	top: -160px;
	right: -150px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, rgba(79, 70, 229, 0.1) 45%, transparent 75%);
	filter: blur(80px);
}

.kado-hero>* {
	position: relative;
	z-index: 1;
}

.kado-hero .wp-block-heading {
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.12;
}

.kado-hero-sub {
	color: var(--wp--preset--color--contrast-muted, #64748B);
	max-width: 640px;
	margin-inline: auto;
	line-height: 1.65;
}

/* =====================================================
   4. PILL BADGE & CHIPS
   ===================================================== */

.kado-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 1.15rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent-2, #F3EEFF);
	color: var(--wp--preset--color--accent-1, #7C3AED);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	border: 1px solid rgba(124, 58, 237, 0.2);
	box-shadow: 0 2px 10px rgba(124, 58, 237, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	width: fit-content;
}

.kado-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(124, 58, 237, 0.16);
}

.kado-pill svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	vertical-align: middle;
}

/* Rotate badge */
.kado-badge-rot {
	transform: rotate(-6deg);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.kado-badge-rot:hover {
	transform: rotate(0deg) scale(1.04);
}

.kado-badge-free {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 1.3rem;
	border-radius: 9999px;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	box-shadow: 0 10px 25px rgba(124, 58, 237, 0.35);
}

/* =====================================================
   5. BUTTONS (Modern Fill, Glow, Outline)
   ===================================================== */

.wp-block-button__link {
	border-radius: 12px;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 0.85rem 1.75rem;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
}

.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	color: #FFFFFF !important;
	border: 1px solid transparent;
	box-shadow: 0 6px 18px rgba(124, 58, 237, 0.28);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(124, 58, 237, 0.38);
	filter: brightness(1.06);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: #FFFFFF;
	color: var(--wp--preset--color--contrast, #0F172A) !important;
	border: 1.5px solid rgba(124, 58, 237, 0.24);
	box-shadow: var(--kado-shadow-sm);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent-1, #7C3AED);
	color: var(--wp--preset--color--accent-1, #7C3AED) !important;
	background: var(--wp--preset--color--accent-2, #F3EEFF);
	transform: translateY(-2px);
	box-shadow: var(--kado-shadow-md);
}

/* Custom button styles */
.is-style-kado-gradient .wp-block-button__link {
	background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 50%, #06B6D4 100%) !important;
	color: #FFFFFF !important;
	box-shadow: 0 10px 26px rgba(124, 58, 237, 0.32);
	border: none;
}

.is-style-kado-pill-outline .wp-block-button__link {
	border-radius: 9999px;
	border: 1.5px solid var(--wp--preset--color--accent-1, #7C3AED);
	color: var(--wp--preset--color--accent-1, #7C3AED) !important;
	background: transparent;
}

/* WhatsApp Button */
.kado-btn-wa .wp-block-button__link,
.kado-btn-wa {
	background: #25D366 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	box-shadow: 0 8px 22px rgba(37, 211, 102, 0.32);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.kado-btn-wa .wp-block-button__link:hover,
.kado-btn-wa:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	color: #FFFFFF !important;
	box-shadow: 0 14px 30px rgba(37, 211, 102, 0.42) !important;
}

.kado-btn-wa svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* =====================================================
   6. STATS / SOCIAL PROOF
   ===================================================== */

.kado-stat-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent-2, #F3EEFF);
	border: 1px solid rgba(124, 58, 237, 0.15);
	box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
	transition: transform 0.25s ease;
}

.kado-stat-icon:hover {
	transform: scale(1.08) rotate(3deg);
}

.kado-stat-icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--wp--preset--color--accent-1, #7C3AED);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kado-stat-number {
	font-size: clamp(2rem, 3.5vw, 2.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}

/* =====================================================
   7. FEATURE CARDS & GLASS CARDS
   ===================================================== */

.kado-feature-card {
	border: 1px solid rgba(124, 58, 237, 0.1);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: var(--kado-shadow-sm);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.25s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.kado-feature-card:hover {
	transform: translateY(-6px);
	border-color: rgba(124, 58, 237, 0.28);
	box-shadow: 0 16px 36px -4px rgba(124, 58, 237, 0.14), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

.kado-feature-card--highlight {
	background: linear-gradient(145deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	box-shadow: 0 14px 34px rgba(124, 58, 237, 0.35) !important;
}

.kado-feature-card--highlight:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(124, 58, 237, 0.45) !important;
}

.kado-feature-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent-2, #F3EEFF);
	border: 1px solid rgba(124, 58, 237, 0.15);
	transition: transform 0.25s ease;
}

.kado-feature-card:hover .kado-feature-icon {
	transform: scale(1.06);
}

.kado-feature-icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--wp--preset--color--accent-1, #7C3AED);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kado-feature-card--highlight .kado-feature-icon {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}

.kado-feature-card--highlight .kado-feature-icon svg {
	stroke: #FFFFFF;
}

/* Custom group block styles */
.is-style-kado-card-glass {
	background: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-radius: 20px !important;
	box-shadow: var(--kado-shadow-md) !important;
	transform: translateZ(0);
}

.is-style-kado-card-elevated {
	background: #FFFFFF !important;
	border-radius: 20px !important;
	border: 1px solid rgba(15, 23, 42, 0.06) !important;
	box-shadow: var(--kado-shadow-lg) !important;
}

.is-style-kado-card-glow {
	border-radius: 20px !important;
	border: 1.5px solid transparent !important;
	background: linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, #7C3AED, #4F46E5, #06B6D4) border-box !important;
	box-shadow: 0 10px 30px rgba(124, 58, 237, 0.12) !important;
}

/* =====================================================
   8. CHECKLIST & VALUE PROP
   ===================================================== */

.kado-check-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin-top: 1.25rem !important;
	margin-bottom: 1.25rem !important;
}

.kado-check-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.85rem !important;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast, #0F172A);
}

.kado-check-list li svg {
	width: 22px;
	height: 22px;
	min-width: 22px;
	stroke: var(--wp--preset--color--accent-1, #7C3AED);
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	background: var(--wp--preset--color--accent-2, #F3EEFF);
	border-radius: 50%;
	padding: 3px;
}

.kado-value-card {
	border-radius: 24px;
	background: linear-gradient(150deg, var(--wp--preset--color--accent-2, #F3EEFF) 0%, #FFFFFF 85%);
	border: 1px solid rgba(124, 58, 237, 0.12);
	box-shadow: var(--kado-shadow-md);
	overflow: hidden;
}

/* =====================================================
   9. THEME SHOWCASE CARDS & ARROWS
   ===================================================== */

.kado-theme-card {
	border: 1px solid rgba(124, 58, 237, 0.12);
	border-radius: 20px;
	background: #FFFFFF;
	overflow: hidden;
	box-shadow: var(--kado-shadow-sm);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.3s ease;
	position: relative;
}

.kado-theme-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px -8px rgba(124, 58, 237, 0.18), 0 6px 14px -2px rgba(15, 23, 42, 0.05);
	border-color: rgba(124, 58, 237, 0.3);
}

.kado-theme-card figure {
	overflow: hidden;
	margin-bottom: 0 !important;
}

.kado-theme-card figure img {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	width: 100%;
	display: block;
}

.kado-theme-card:hover figure img {
	transform: scale(1.06);
}

.kado-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(124, 58, 237, 0.24);
	background: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--kado-shadow-sm);
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kado-arrow:hover {
	background: var(--wp--preset--color--accent-1, #7C3AED);
	border-color: var(--wp--preset--color--accent-1, #7C3AED);
	transform: scale(1.06);
	box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);
}

.kado-arrow svg {
	width: 20px;
	height: 20px;
	stroke: var(--wp--preset--color--accent-1, #7C3AED);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.2s ease;
}

.kado-arrow:hover svg {
	stroke: #FFFFFF;
}

/* =====================================================
   10. TESTIMONIALS & CTA BANNER
   ===================================================== */

.kado-testimonial {
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid rgba(124, 58, 237, 0.1);
	box-shadow: var(--kado-shadow-md);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kado-testimonial:hover {
	transform: translateY(-5px);
	box-shadow: var(--kado-shadow-lg);
	border-color: rgba(124, 58, 237, 0.22);
}

.kado-stars {
	color: #F59E0B;
	font-size: 1.15rem;
	letter-spacing: 4px;
	margin-top: 0;
	margin-bottom: 1rem !important;
}

.kado-cta-banner {
	border-radius: 24px;
	background: #FFFFFF;
	border: 1px solid rgba(124, 58, 237, 0.16);
	box-shadow: 0 20px 50px -10px rgba(124, 58, 237, 0.12), 0 8px 20px -4px rgba(15, 23, 42, 0.04);
	position: relative;
	overflow: hidden;
}

.kado-cta-banner::before {
	content: "";
	position: absolute;
	top: -50px;
	right: -50px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

/* =====================================================
   11. FOOTER
   ===================================================== */

.wp-block-template-part,
header.wp-block-template-part,
footer.wp-block-template-part {
	width: 100% !important;
	max-width: 100% !important;
}

.kado-footer {
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	background: #FFFFFF;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.kado-footer .alignwide,
.kado-footer .wp-block-columns.alignwide,
.kado-footer > .wp-block-columns,
.kado-footer > .wp-block-separator,
.kado-footer > .wp-block-group {
	max-width: var(--wp--style--global--wide-size, 1280px) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

.kado-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.7rem !important;
	margin-bottom: var(--wp--preset--spacing--30);
}

.kado-footer__brand .wp-block-site-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0;
}

.kado-footer__brand .wp-block-site-title a {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.kado-footer__brand .wp-block-site-title a:hover {
	opacity: 0.85;
}

.kado-footer .wp-block-site-title a {
	color: var(--wp--preset--color--contrast, #0F172A);
	text-decoration: none;
	font-weight: 800;
}

.kado-footer a {
	text-decoration: none;
	transition: color 0.2s ease;
	color: var(--wp--preset--color--contrast-muted, #64748B);
}

.kado-footer a:hover {
	color: var(--wp--preset--color--accent-1, #7C3AED);
}

.kado-footer .wp-block-social-links .wp-social-link {
	border-radius: 10px;
	background: var(--wp--preset--color--accent-2, #F3EEFF);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.kado-footer .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--accent-1, #7C3AED);
	color: #FFFFFF;
}

/* =====================================================
   12. UTILITIES & ACCENTS
   ===================================================== */

.kado-text-balance {
	text-wrap: balance;
}

.kado-gradient-text {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

.wp-block-image.is-style-rounded img,
.wp-block-image.is-style-rounded {
	border-radius: 20px;
}

.kado-shadow-elevate {
	box-shadow: 0 20px 45px rgba(124, 58, 237, 0.22);
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 0;
}

/* =====================================================
   13. PRICING CARDS
   ===================================================== */

.kado-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid rgba(124, 58, 237, 0.12);
	border-radius: 24px;
	background: #FFFFFF;
	box-shadow: var(--kado-shadow-md);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.25s ease;
}

.kado-pricing-card:hover {
	transform: translateY(-6px);
	border-color: rgba(124, 58, 237, 0.28);
	box-shadow: 0 18px 40px -6px rgba(124, 58, 237, 0.16), 0 6px 14px -2px rgba(15, 23, 42, 0.05);
}

.kado-pricing-card--featured {
	background: linear-gradient(150deg, var(--wp--preset--color--accent-1, #7C3AED) 0%, var(--wp--preset--color--accent-3, #4F46E5) 100%);
	border: none;
	color: #FFFFFF;
	box-shadow: 0 18px 40px rgba(124, 58, 237, 0.35);
}

.kado-pricing-card--featured:hover {
	box-shadow: 0 24px 55px rgba(124, 58, 237, 0.45);
}

@media (min-width: 782px) {
	.kado-pricing-card--featured {
		transform: scale(1.03);
	}

	.kado-pricing-card--featured:hover {
		transform: translateY(-6px) scale(1.03);
	}
}

.kado-pricing-card--featured .kado-check-list li,
.kado-pricing-card--featured .kado-check-list .wp-block-list-item {
	color: #FFFFFF !important;
}

.kado-pricing-card--featured .kado-check-list li svg,
.kado-pricing-card--featured .kado-check-list .wp-block-list-item svg {
	stroke: #FFFFFF !important;
	background: rgba(255, 255, 255, 0.18) !important;
}

.kado-pricing-card--featured .wp-block-button__link,
.kado-pricing-card--featured .wp-block-button a,
.kado-pricing-card--featured .wp-block-button div,
.kado-pricing-card--featured .wp-block-button__link.wp-element-button {
	background: #FFFFFF !important;
	color: #7C3AED !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

.kado-pricing-card--featured .wp-block-button__link:hover,
.kado-pricing-card--featured .wp-block-button a:hover {
	filter: brightness(0.97);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24) !important;
	background: #FFFFFF !important;
	color: #7C3AED !important;
}

.kado-pricing-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.95rem;
	border-radius: 9999px;
	background: #FFFFFF;
	color: var(--wp--preset--color--accent-1, #7C3AED);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}