/**
 * Iridium Design — global tokens, utility classes, decorative patterns,
 * and overrides that elevate Kadence + core blocks into an editorial
 * landing-page system.
 *
 * Naming convention: `.ir-` prefix for everything bespoke.
 * Token entry points: `:root`. Override colors there to retheme.
 */

:root {
	/* ----- Color System (Light) ----- */
	--ir-paper:        #fbfaf6; /* warm off-white base */
	--ir-paper-rule:   #ece8dc; /* hairline rules on paper */
	--ir-ink:          #14131a; /* near-black for type */
	--ir-ink-soft:     #4a4955;
	--ir-ink-mute:     #807e8d;

	--ir-iridium:      #6f0ef0; /* primary — keep brand violet */
	--ir-iridium-deep: #4708a3;
	--ir-cobalt:       #007bc7; /* secondary blue */
	--ir-mint:         #4ad4b0; /* tertiary accent */
	--ir-rose:         #ff6f91; /* rare-earth pink, sparing */
	--ir-amber:        #ffb547;

	--ir-surface:      #ffffff;
	--ir-surface-2:    #f4f1e9;
	--ir-surface-3:    #ebe6d6;

	/* prismatic gradient — the signature visual */
	--ir-prism: linear-gradient(
		112deg,
		#ff6f91 0%,
		#ffb547 18%,
		#4ad4b0 38%,
		#007bc7 60%,
		#6f0ef0 82%,
		#4708a3 100%
	);
	--ir-prism-soft: linear-gradient(
		112deg,
		rgba(255,111,145,.18) 0%,
		rgba(255,181,71,.16) 22%,
		rgba(74,212,176,.16) 44%,
		rgba(0,123,199,.18) 66%,
		rgba(111,14,240,.20) 100%
	);

	/* ----- Type Scale ----- */
	--ir-font-display: "Fraunces", "Times New Roman", serif;
	--ir-font-body:    "Geist", "Helvetica Neue", system-ui, sans-serif;
	--ir-font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

	/* ----- Spacing / Radius ----- */
	--ir-radius-sm: 6px;
	--ir-radius:    14px;
	--ir-radius-lg: 28px;

	--ir-shadow-1: 0 1px 2px rgba(20,19,26,.04), 0 4px 14px rgba(20,19,26,.04);
	--ir-shadow-2: 0 6px 24px -8px rgba(20,19,26,.10), 0 24px 60px -20px rgba(71,8,163,.18);
}

/* ============================================================
   Global typography refinements (cascade onto Kadence defaults)
   ============================================================ */

body {
	font-family: var(--ir-font-body);
	font-feature-settings: "ss01", "ss02", "cv11";
	background: var(--ir-paper);
	color: var(--ir-ink);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.kt-adv-heading,
.entry-title,
.site-branding .site-title,
.entry-header .entry-title {
	font-family: var(--ir-font-display);
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 30;
	letter-spacing: -0.018em;
	color: var(--ir-ink);
}

h1, .has-huge-font-size, .has-xx-large-font-size {
	letter-spacing: -0.028em;
	line-height: 1.02;
	font-weight: 420;
}

h2, .has-x-large-font-size {
	letter-spacing: -0.022em;
	line-height: 1.06;
	font-weight: 440;
}

p { font-feature-settings: "ss01", "cv11"; }

::selection { background: var(--ir-iridium); color: #fff; }

/* ============================================================
   Decorative utilities (use as className on any block)
   ============================================================ */

/* Iridescent text fill */
.ir-text-prism {
	background: var(--ir-prism);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Italic display flourish (for second-half headlines) */
.ir-italic-flourish em,
.ir-italic-flourish i,
.ir-italic-flourish .has-inline-color em {
	font-family: var(--ir-font-display);
	font-style: italic;
	font-variation-settings: "SOFT" 100;
	font-weight: 380;
	letter-spacing: -0.01em;
	color: var(--ir-iridium);
}

/* Eyebrow label — small, mono, tracked */
.ir-eyebrow {
	font-family: var(--ir-font-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ir-ink-mute);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.ir-eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

/* Hairline divider */
.ir-rule {
	height: 1px;
	background: var(--ir-paper-rule);
	width: 100%;
}

/* Periodic-table glyph card (for "Element 77" motif) */
.ir-element-card {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 88px;
	height: 88px;
	padding: 8px 10px;
	border: 1.5px solid var(--ir-ink);
	border-radius: 4px;
	font-family: var(--ir-font-mono);
	background: var(--ir-paper);
	color: var(--ir-ink);
	line-height: 1;
}
.ir-element-card .num   { font-size: 11px; opacity: .7; }
.ir-element-card .sym   { font-family: var(--ir-font-display); font-size: 38px; font-weight: 500; letter-spacing: -0.04em; align-self: center; margin: 4px 0; }
.ir-element-card .label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; opacity: .7; }

/* Iridescent badge */
.ir-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	font-family: var(--ir-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	background: var(--ir-prism-soft);
	color: var(--ir-ink);
	border: 1px solid rgba(111,14,240,.14);
}
.ir-badge .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ir-prism);
	box-shadow: 0 0 0 3px rgba(111,14,240,.12);
}

/* Card variants */
.ir-card {
	background: var(--ir-surface);
	border: 1px solid var(--ir-paper-rule);
	border-radius: var(--ir-radius);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ir-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ir-shadow-2);
	border-color: rgba(111,14,240,.22);
}
.ir-card-feature {
	background: var(--ir-surface);
	border: 1px solid var(--ir-paper-rule);
	border-radius: var(--ir-radius);
	position: relative;
	overflow: hidden;
}
.ir-card-feature::before {
	content: "";
	position: absolute; inset: 0 0 auto 0;
	height: 2px;
	background: var(--ir-prism);
	opacity: 0;
	transition: opacity .35s ease;
}
.ir-card-feature:hover::before { opacity: 1; }

/* "Iridescent pricing card" — featured plan */
.ir-card-featured {
	position: relative;
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(111,14,240,.10), transparent 60%),
		radial-gradient(120% 80% at 100% 100%, rgba(0,123,199,.10), transparent 60%),
		var(--ir-surface);
	border: 1px solid rgba(111,14,240,.20);
	border-radius: var(--ir-radius);
}
.ir-card-featured::after {
	content: "Most popular";
	position: absolute;
	top: 14px; right: 14px;
	font-family: var(--ir-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ir-ink);
	color: #fff;
}

/* ============================================================
   Hero treatments — used via row-layout className
   ============================================================ */

.ir-hero-paper {
	position: relative;
	background: var(--ir-paper);
	overflow: hidden;
	isolation: isolate;
}
.ir-hero-paper::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 80%;
	background:
		radial-gradient(60% 50% at 18% 30%, rgba(255,111,145,.18), transparent 60%),
		radial-gradient(50% 50% at 78% 18%, rgba(0,123,199,.20), transparent 60%),
		radial-gradient(60% 60% at 60% 78%, rgba(111,14,240,.16), transparent 60%),
		radial-gradient(50% 50% at 12% 80%, rgba(74,212,176,.14), transparent 60%);
	filter: blur(40px);
	z-index: -2;
	animation: ir-drift 24s ease-in-out infinite alternate;
}
.ir-hero-paper::after {
	content: "";
	position: absolute; inset: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.6;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: -1;
}
@keyframes ir-drift {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(2%, 1%) scale(1.05); }
	100% { transform: translate(-1%, 2%) scale(1.02); }
}

/* Subtle grid overlay for technical feel */
.ir-grid-overlay {
	position: relative;
}
.ir-grid-overlay::after {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, rgba(20,19,26,.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(20,19,26,.04) 1px, transparent 1px);
	background-size: 80px 80px;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Section with thin top rule + index number */
.ir-section-numbered {
	position: relative;
	border-top: 1px solid var(--ir-paper-rule);
	padding-top: clamp(48px, 7vw, 96px) !important;
}
.ir-section-numbered[data-ir-num]::before {
	content: attr(data-ir-num);
	position: absolute;
	top: 14px; left: 0;
	font-family: var(--ir-font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--ir-ink-mute);
}

/* ============================================================
   Buttons (override Kadence defaults softly)
   ============================================================ */

.kb-button.kb-btn-global-inherit,
.wp-block-button__link {
	font-family: var(--ir-font-body);
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.ir-btn-primary .kb-button,
.ir-btn-primary > a {
	background: var(--ir-ink) !important;
	color: #fff !important;
	border: 1px solid var(--ir-ink) !important;
	border-radius: 999px !important;
	padding: 14px 26px !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 22px -8px rgba(20,19,26,.45);
}
.ir-btn-primary .kb-button:hover,
.ir-btn-primary > a:hover {
	background: var(--ir-iridium) !important;
	border-color: var(--ir-iridium) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -10px rgba(111,14,240,.55);
}

.ir-btn-ghost .kb-button,
.ir-btn-ghost > a {
	background: transparent !important;
	color: var(--ir-ink) !important;
	border: 1px solid var(--ir-paper-rule) !important;
	border-radius: 999px !important;
	padding: 14px 26px !important;
}
.ir-btn-ghost .kb-button:hover,
.ir-btn-ghost > a:hover {
	border-color: var(--ir-ink) !important;
	background: var(--ir-paper) !important;
}

/* Arrow-after link */
.ir-link-arrow a {
	font-family: var(--ir-font-body);
	font-weight: 500;
	color: var(--ir-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid var(--ir-paper-rule);
	padding-bottom: 4px;
	transition: gap .25s ease, border-color .25s ease, color .25s ease;
}
.ir-link-arrow a::after {
	content: "→";
	display: inline-block;
	transition: transform .25s ease;
}
.ir-link-arrow a:hover {
	color: var(--ir-iridium);
	border-color: var(--ir-iridium);
	gap: 10px;
}

/* ============================================================
   Pricing tweaks
   ============================================================ */

.ir-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--ir-font-display);
	font-variation-settings: "SOFT" 50;
}
.ir-price .currency { font-size: .55em; color: var(--ir-ink-mute); }
.ir-price .amount   { font-size: 56px; line-height: 1; letter-spacing: -0.04em; font-weight: 480; }
.ir-price .period   { font-size: 14px; color: var(--ir-ink-mute); font-family: var(--ir-font-body); margin-left: 6px; }

/* ============================================================
   Marquee / logo strip
   ============================================================ */

.ir-marquee {
	display: flex;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ir-marquee-track {
	display: flex;
	animation: ir-marquee 38s linear infinite;
	gap: 64px;
	flex-shrink: 0;
}
@keyframes ir-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ============================================================
   Testimonial card
   ============================================================ */

.ir-testimonial {
	background: var(--ir-surface);
	border: 1px solid var(--ir-paper-rule);
	border-radius: var(--ir-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	position: relative;
}
.ir-testimonial::before {
	content: "\201C";
	position: absolute;
	top: 8px; left: 22px;
	font-family: var(--ir-font-display);
	font-size: 80px;
	line-height: 1;
	color: var(--ir-iridium);
	opacity: .14;
}
.ir-testimonial p {
	font-family: var(--ir-font-display);
	font-size: 19px;
	line-height: 1.45;
	color: var(--ir-ink);
	margin: 0;
	font-variation-settings: "SOFT" 50;
}
.ir-testimonial .ir-testimonial-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ir-font-body);
	font-size: 14px;
	color: var(--ir-ink-soft);
}
.ir-testimonial .ir-testimonial-meta strong {
	color: var(--ir-ink);
	font-weight: 500;
}
.ir-testimonial .ir-stars {
	color: var(--ir-amber);
	letter-spacing: 1px;
	font-size: 13px;
}

/* ============================================================
   FAQ details
   ============================================================ */

.ir-faq details {
	border-top: 1px solid var(--ir-paper-rule);
	padding: 22px 0;
	cursor: pointer;
}
.ir-faq details:last-child { border-bottom: 1px solid var(--ir-paper-rule); }
.ir-faq summary {
	font-family: var(--ir-font-display);
	font-size: 22px;
	line-height: 1.3;
	color: var(--ir-ink);
	font-weight: 440;
	letter-spacing: -0.012em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	list-style: none;
}
.ir-faq summary::-webkit-details-marker { display: none; }
.ir-faq summary::after {
	content: "+";
	font-family: var(--ir-font-mono);
	font-size: 22px;
	color: var(--ir-iridium);
	transition: transform .25s ease;
}
.ir-faq details[open] summary::after { content: "−"; transform: rotate(180deg); }
.ir-faq details > p,
.ir-faq details .ir-faq-body {
	margin-top: 14px;
	font-family: var(--ir-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ir-ink-soft);
	max-width: 70ch;
}

/* ============================================================
   Stat block
   ============================================================ */

.ir-stat .ir-stat-value {
	font-family: var(--ir-font-display);
	font-size: clamp(48px, 6vw, 84px);
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--ir-ink);
	font-variation-settings: "SOFT" 50;
}
.ir-stat .ir-stat-label {
	font-family: var(--ir-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ir-ink-mute);
	margin-top: 8px;
}

/* ============================================================
   Header / nav refinements
   ============================================================ */

.site-header-row .header-navigation .menu-item > a {
	font-family: var(--ir-font-body) !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
	font-size: 15px !important;
}

.transparent-header .site-header-row .header-navigation .menu-item > a,
.site-header-row .header-navigation .menu-item > a {
	color: var(--ir-ink);
}

/* Sticky header subtle hairline */
.site-header.item-is-stuck .site-header-row,
.site-header[data-stuck="true"] .site-header-row {
	border-bottom: 1px solid var(--ir-paper-rule);
	background: rgba(251,250,246,.92);
	backdrop-filter: blur(10px);
}

/* Footer refinements (Kadence outputs custom widget HTML; we target generically) */
.site-footer { background: var(--ir-paper) !important; color: var(--ir-ink); }
.site-footer .widget-title { font-family: var(--ir-font-mono) !important; font-size: 12px !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ir-ink-mute) !important; }
.site-footer .footer-social-wrap a { color: var(--ir-ink); }
.site-footer-row-container-inner { border-top: 1px solid var(--ir-paper-rule); }

/* ============================================================
   Page title (when used)
   ============================================================ */

.entry-hero .entry-header,
.page-title-wrap {
	background: var(--ir-paper) !important;
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */

.ir-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s ease, transform .8s ease;
}
.ir-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
	.ir-element-card { width: 70px; height: 70px; }
	.ir-element-card .sym { font-size: 30px; }
	.ir-testimonial p { font-size: 17px; }
	.ir-faq summary { font-size: 18px; }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ir-hero-paper::before,
	.ir-marquee-track,
	.ir-reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}