/**
 * dbi services · Neve Child Theme
 * eggs/kawaii/kawaii.css — Kawaii mode (eggs/kawaii/kawaii.php,
 * eggs/kawaii/kawaii.js, enhancements #48).
 *
 * The whole skin hangs on html.dbi-kawaii. The site's colours are
 * variables (tokens.css reads Neve's --nv-* ones), so the first block
 * re-points them; the rest rounds the corners, adds dots and hearts,
 * puts ears and blush on the portraits and turns the scroll-to-top
 * button into the heart that switches the mode off.
 *
 * Contrast: #c2185b carries white text (5.1:1) and is the only pink
 * that does; the pastels are backgrounds only; the ink is plum
 * (#4a1d33, 11:1 on blush). Under prefers-reduced-motion nothing moves.
 *
 * Removing kawaii.php's require in eggs/eggs.php unloads this file.
 */

/* ── Tokens ──────────────────────────────────────────────── */
html.dbi-kawaii {
	--nv-primary-accent:   #c2185b;
	--nv-secondary-accent: #a3144c;
	--nv-site-bg:          #fff3f8;
	--nv-light-bg:         #ffe4ef;
	--nv-dark-bg:          #ffd3e4;
	--nv-text-color:       #4a1d33;
	--nv-text-dark-bg:     #4a1d33;
	--nv-c-1:              #7a4360;
	--nv-c-2:              #ffe4ef;
	--kawaii-pink:         #ff8fbf;
	--kawaii-rose:         #ffb6d2;
	--kawaii-blush:        #ffd3e4;
}
html.dbi-kawaii .dbi-scope {
	--teal-mid:   rgba( 194, 24, 91, .12 );
	--border:     rgba( 194, 24, 91, .14 );
	--divider:    rgba( 194, 24, 91, .08 );
	--faint:      #7a4360;
	--faint-on-dark: #7a4360;
	--f-display:  'Fredoka', 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
}

/* ── Surfaces ────────────────────────────────────────────── */
html.dbi-kawaii body {
	background-color: #fff3f8;
	background-image: radial-gradient( rgba( 194, 24, 91, .09 ) 2px, transparent 2.6px );
	background-size: 26px 26px;
}
html.dbi-kawaii .dbi-hero {
	background: linear-gradient( 135deg, #ffd3e4 0%, #ffe9f2 55%, #fff6fa 100% ) !important;
	border-radius: 0 0 48px 48px;
}
html.dbi-kawaii .dbi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .55;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><path fill='%23ff8fbf' fill-opacity='.35' d='M32 46 18 33a8 8 0 0 1 11-11l3 3 3-3a8 8 0 0 1 11 11Z'/></svg>" );
	background-size: 64px 64px;
}
html.dbi-kawaii .dbi-hero-h1,
html.dbi-kawaii .dbi-hero-h1 em,
html.dbi-kawaii .wp-block-post-title,
html.dbi-kawaii .dbi-cta-h2,
html.dbi-kawaii .dbi-most-read-label,
html.dbi-kawaii .dbi-search-title,
html.dbi-kawaii h2.wp-block-heading {
	font-family: var( --f-display, 'Fredoka', sans-serif ) !important;
	font-weight: 500 !important;
	letter-spacing: .005em;
}
html.dbi-kawaii .dbi-hero-h1 em {
	color: #c2185b;
	font-style: normal;
}
/* Text that front-page.css / cta.css paints in hard-coded light values
   for the dark surfaces: plum on the pastels (7:1 and better). */
html.dbi-kawaii .dbi-hero-sub,
html.dbi-kawaii .dbi-hero-proof,
html.dbi-kawaii .dbi-hero-proof a,
html.dbi-kawaii .dbi-hero-proof .dbi-site-reads,
html.dbi-kawaii .dbi-cta-body,
html.dbi-kawaii .dbi-cta-h2 {
	color: #4a1d33 !important;
}
html.dbi-kawaii .dbi-hero-sub,
html.dbi-kawaii .dbi-cta-body {
	font-weight: 400;
	opacity: .85;
}
html.dbi-kawaii .dbi-hero-proof a::after {
	background-color: #4a1d33;
}
html.dbi-kawaii .dbi-cta-interrupt,
html.dbi-kawaii .dbi-cta {
	background: linear-gradient( 135deg, #ffd3e4, #ffe9f2 ) !important;
}

/* Round everything that has a corner. */
html.dbi-kawaii .dbi-grid-section .wp-block-post,
html.dbi-kawaii .dbi-card-body,
html.dbi-kawaii .dbi-grid-section .wp-block-post-featured-image,
html.dbi-kawaii .dbi-grid-section .wp-block-post-featured-image img,
html.dbi-kawaii .dbi-grid-section .wp-block-post-featured-image a,
html.dbi-kawaii .dbi-cta,
html.dbi-kawaii .dbi-cta-interrupt,
html.dbi-kawaii .dbi-most-read,
html.dbi-kawaii .dbi-most-read-card,
html.dbi-kawaii .search-field,
html.dbi-kawaii .button,
html.dbi-kawaii .wp-element-button,
html.dbi-kawaii input[type="submit"] {
	border-radius: 24px !important;
}
html.dbi-kawaii .button,
html.dbi-kawaii .wp-element-button,
html.dbi-kawaii .search-submit,
html.dbi-kawaii .dbi-filter-bar a {
	border-radius: 999px !important;
}
html.dbi-kawaii .dbi-grid-section .wp-block-post {
	box-shadow: 0 10px 30px rgba( 194, 24, 91, .10 );
	transition: transform .25s ease;
}
html.dbi-kawaii .dbi-grid-section .wp-block-post:hover {
	transform: translateY( -3px ) rotate( -.4deg );
}
html.dbi-kawaii .dbi-filter-bar a[aria-current],
html.dbi-kawaii .dbi-filter-bar .current-menu-item a,
html.dbi-kawaii .dbi-filter-bar li.is-current a {
	background: #c2185b !important;
	color: #fff !important;
}
html.dbi-kawaii .dbi-filter-bar a[aria-current]::before,
html.dbi-kawaii .dbi-filter-bar .current-menu-item a::before,
html.dbi-kawaii .dbi-filter-bar li.is-current a::before {
	content: "♥ ";
}

/* Logo: a bow on the corner. */
html.dbi-kawaii .site-logo .brand {
	position: relative;
	display: inline-block;
}
html.dbi-kawaii .site-logo .brand::after {
	content: "";
	position: absolute;
	top: -12px;
	left: -12px;
	width: 30px;
	height: 22px;
	pointer-events: none;
	background: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'><path d='M15 11 3 3c-2-1-3 1-3 3v10c0 2 1 4 3 3l12-8Zm0 0 12-8c2-1 3 1 3 3v10c0 2-1 4-3 3L15 11Z' fill='%23ff5fa2'/><circle cx='15' cy='11' r='3.5' fill='%23c2185b'/></svg>" ) no-repeat center / contain;
	transform: rotate( -18deg );
}

/* ── Portraits: ears, blush, pastel ───────────────────────── */
html.dbi-kawaii .wp-block-avatar {
	position: relative;
	overflow: visible;
}
html.dbi-kawaii .wp-block-avatar img,
html.dbi-kawaii .avatar {
	border-radius: 50% !important;
	border: 3px solid #ff8fbf;
	box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba( 194, 24, 91, .22 );
	filter: sepia( .32 ) saturate( 1.45 ) hue-rotate( -18deg ) brightness( 1.06 ) contrast( .96 );
}
html.dbi-kawaii .wp-block-avatar::before,
html.dbi-kawaii .wp-block-avatar::after {
	content: "";
	position: absolute;
	top: -9px;
	width: 26px;
	height: 26px;
	pointer-events: none;
	z-index: 1;
	clip-path: polygon( 50% 0, 100% 100%, 0 100% );
	background: radial-gradient( circle at 50% 95%, #ff5fa2 0 34%, #ff8fbf 36% );
	filter: drop-shadow( 0 1px 0 #fff );
}
html.dbi-kawaii .wp-block-avatar::before {
	left: 2px;
	transform: rotate( -28deg );
}
html.dbi-kawaii .wp-block-avatar::after {
	right: 2px;
	transform: rotate( 28deg );
}
html.dbi-kawaii .wp-block-avatar__link {
	position: relative;
	display: block;
}
html.dbi-kawaii .wp-block-avatar__link::before,
html.dbi-kawaii .wp-block-avatar__link::after {
	content: "";
	position: absolute;
	top: 58%;
	width: 11px;
	height: 7px;
	border-radius: 50%;
	background: #ff5fa2;
	opacity: .55;
	pointer-events: none;
	z-index: 1;
}
html.dbi-kawaii .wp-block-avatar__link::before { left: 19%; }
html.dbi-kawaii .wp-block-avatar__link::after  { right: 19%; }

/* ── The heart (scroll-to-top button = the off switch) ───── */
/* The button is also the touch trigger (a long press): no text
   selection, no iOS callout, no double-tap zoom on it, so the press
   runs its course. */
.scroll-to-top {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}
html.dbi-kawaii .scroll-to-top {
	--bgcolor: #c2185b;
	--hoverbgcolor: #a3144c;
	--borderradius: 50%;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgba( 194, 24, 91, .35 );
	animation: dbi-kawaii-pulse 1.6s ease-in-out infinite;
}
html.dbi-kawaii .scroll-to-top .scroll-to-top-icon {
	display: none;
}
html.dbi-kawaii .scroll-to-top::before {
	content: "♥";
	font: 700 22px/1 'Segoe UI Symbol', 'Apple Color Emoji', system-ui, sans-serif;
	color: #fff;
}
@keyframes dbi-kawaii-pulse {
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.08 ); }
}

/* Heart cursor on fine pointers; interactive elements keep the hand. */
@media ( pointer: fine ) {
	html.dbi-kawaii body {
		cursor: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11 20 2.6 11.6A5 5 0 0 1 9.7 4.5L11 5.8l1.3-1.3a5 5 0 0 1 7.1 7.1Z' fill='%23ff5fa2' stroke='%23fff' stroke-width='1.5'/></svg>" ) 11 11, auto;
	}
}

/* ── Sparkles in the hero ────────────────────────────────── */
.dbi-kawaii-sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.dbi-kawaii-sparkles span {
	position: absolute;
	font-size: 18px;
	color: #fff;
	text-shadow: 0 0 8px #ff8fbf, 0 0 2px #c2185b;
	animation: dbi-kawaii-twinkle 2.4s ease-in-out infinite;
}
@keyframes dbi-kawaii-twinkle {
	0%, 100% { opacity: 0; transform: scale( .5 ) rotate( 0deg ); }
	50%      { opacity: 1; transform: scale( 1.1 ) rotate( 25deg ); }
}

/* ── Entrance: the bubble and the burst ──────────────────── */
.dbi-kawaii-bubble {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	pointer-events: none;
	background: radial-gradient( circle at var( --x, 50% ) var( --y, 50% ), #fff 0, #ffb6d2 30%, #ff8fbf 100% );
	clip-path: circle( 0 at var( --x, 50% ) var( --y, 50% ) );
	transition: clip-path .55s cubic-bezier( .2, .8, .2, 1 ), opacity .3s ease .5s;
}
.dbi-kawaii-bubble.is-open {
	clip-path: circle( 160% at var( --x, 50% ) var( --y, 50% ) );
	opacity: 0;
}
.dbi-kawaii-burst {
	position: fixed;
	z-index: 2147482001;
	left: 0;
	top: 0;
	pointer-events: none;
	color: #ff5fa2;
	font-size: 18px;
	text-shadow: 0 0 4px #fff;
	animation: dbi-kawaii-fly .9s cubic-bezier( .2, .7, .3, 1 ) forwards;
}
@keyframes dbi-kawaii-fly {
	from { transform: translate( var( --x0 ), var( --y0 ) ) scale( .4 ); opacity: 1; }
	to   { transform: translate( var( --x1 ), var( --y1 ) ) scale( 1.2 ) rotate( var( --r ) ); opacity: 0; }
}

/* ── Toast ───────────────────────────────────────────────── */
.dbi-kawaii-toast {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 2147482002;
	max-width: min( 360px, calc( 100vw - 40px ) );
	padding: 16px 18px 14px;
	border-radius: 22px;
	background: #fff;
	color: #4a1d33;
	border: 2px solid #ff8fbf;
	box-shadow: 0 16px 40px rgba( 194, 24, 91, .22 );
	font: 15px/1.5 var( --f-body, 'Inter', system-ui, sans-serif );
	transform: translateY( 16px );
	opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
}
.dbi-kawaii-toast.is-in {
	transform: none;
	opacity: 1;
}
.dbi-kawaii-toast strong {
	display: block;
	font: 600 20px/1.2 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
	color: #c2185b;
	margin-bottom: 4px;
}
.dbi-kawaii-toast p {
	margin: 0 0 4px;
}
.dbi-kawaii-toast .dbi-kawaii-eggs {
	color: #a3144c;
	font-weight: 600;
}
.dbi-kawaii-toast button {
	margin-top: 8px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: #c2185b;
	color: #fff;
	font: 600 14px var( --f-body, system-ui, sans-serif );
	cursor: pointer;
}
.dbi-kawaii-toast button:focus-visible {
	outline: 3px solid #4a1d33;
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	html.dbi-kawaii .scroll-to-top,
	.dbi-kawaii-sparkles span,
	.dbi-kawaii-burst,
	.dbi-kawaii-bubble,
	.dbi-kawaii-toast {
		animation: none !important;
		transition: none !important;
	}
	.dbi-kawaii-sparkles {
		display: none;
	}
}