/* =============================================================
   AiraKonnect — Custom Utility Classes
   Loaded on frontend + block editor (add_editor_style)
   ============================================================= */

/* ------------------------------------------------------------------
   0. KEYFRAME ANIMATIONS
   ------------------------------------------------------------------ */
@keyframes ak-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-8px); }
}

/* Force venues page to break out of WP constrained layout (860px) */
.akv {
	max-width: 1280px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Scroll-to-top button — right side */
.ak-scroll-top {
	left: auto !important;
	right: 2rem !important;
	bottom: 2rem !important;
}
@media (max-width: 768px) {
	.ak-scroll-top {
		left: auto !important;
		right: 1.25rem !important;
		bottom: 1.25rem !important;
	}
}

@keyframes ak-pulse {
	0% { transform: scale(0.95); opacity: 0.5; }
	50% { transform: scale(1.05); opacity: 0.8; }
	100% { transform: scale(0.95); opacity: 0.5; }
}

/* ------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (mirrors theme.json for use in raw CSS)
   ------------------------------------------------------------------ */
:root {
	--ak-orange:          #3b82f6;
	--ak-blue-light:    rgba(59, 130, 246, 0.10);
	--ak-orange-glow:     0 0 20px rgba(59, 130, 246, 0.25);
	--ak-bg:              #0f172a;
	--ak-dark:            #f8fafc;
	--ak-white:           #FFFFFF;
	--ak-secondary:       #1e293b;
	--ak-muted:           #94a3b8;
	--ak-border:          #334155;
	--ak-premium-shadow:  0 20px 40px -15px rgba(0, 0, 0, 0.06);
	--ak-glass-bg:        rgba(30, 41, 59, 0.72);
	--ak-glass-border:    rgba(255, 255, 255, 0.12);
	--ak-radius-pill:     9999px;
	--ak-radius-xl:       2.5rem;
	--ak-radius-2xl:      3rem;
}

/* ------------------------------------------------------------------
   2. GLOBAL BASE RESETS FOR THEME
   ------------------------------------------------------------------ */
.wp-site-blocks {
	overflow-x: hidden;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* WordPress template-part header wrapper — collapse out of flow
   The header inside is position:fixed, so this wrapper must take up zero space */
.wp-site-blocks > header,
.wp-site-blocks > .wp-block-template-part:first-child {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	line-height: 0 !important;
	height: 0 !important;
	overflow: visible !important;
}

/* Ensure alignfull sections break out of any container constraint */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Venue grid — responsive */
@media (max-width: 768px) {
	.ak-venue-grid-section [style*="grid-template-columns:repeat(3"] {
		grid-template-columns: 1fr !important;
	}
	.ak-venue-grid-section [style*="grid-template-columns:repeat(2"] {
		grid-template-columns: 1fr !important;
	}
}

/* Hero section responsive — stack columns on mobile */
.ak-hero-section .wp-block-columns {
	flex-wrap: wrap;
}

@media (max-width: 782px) {
	.ak-hero-section .wp-block-column {
		flex-basis: 100% !important;
	}
	.ak-hero-section .wp-block-column:first-child {
		order: 0;
	}
	.ak-hero-section .wp-block-column:last-child {
		order: 1;
		margin-top: 3rem;
	}
}

/* Remove default list styles inside nav / footer */
.wp-block-navigation ul,
.wp-block-navigation ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* ------------------------------------------------------------------
   3. GLASS CARD
   Used on: stat cards, floating hero badge, testimonials
   ------------------------------------------------------------------ */
.glass-card,
.wp-block-group.is-style-glass-card {
	background: var(--ak-glass-bg) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--ak-glass-border) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* ------------------------------------------------------------------
   4. PREMIUM SHADOW
   Used on: hero images, gallery cards, venue cards
   ------------------------------------------------------------------ */
.has-premium-shadow,
.wp-block-image.is-style-premium-shadow img,
.wp-block-image.is-style-premium-shadow figure {
	box-shadow: var(--ak-premium-shadow) !important;
}

/* ------------------------------------------------------------------
   5. ORANGE GLOW
   Used on: CTA buttons, logo icon, step number badges
   ------------------------------------------------------------------ */
.has-orange-glow {
	box-shadow: var(--ak-orange-glow) !important;
}

/* ------------------------------------------------------------------
   6. BLOCK STYLE — GLASS CARD (core/group)
   ------------------------------------------------------------------ */
.wp-block-group.is-style-glass-card {
	background: rgba(30, 41, 59, 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------------
   7. BLOCK STYLE — DARK SECTION (core/group)
   ------------------------------------------------------------------ */
.wp-block-group.is-style-dark-section {
	background-color: #1e293b !important;
	color: #f8fafc !important;
}

.wp-block-group.is-style-dark-section h1,
.wp-block-group.is-style-dark-section h2,
.wp-block-group.is-style-dark-section h3,
.wp-block-group.is-style-dark-section h4,
.wp-block-group.is-style-dark-section h5,
.wp-block-group.is-style-dark-section h6,
.wp-block-group.is-style-dark-section p {
	color: #f8fafc;
}

/* ------------------------------------------------------------------
   8. BLOCK STYLE — ORANGE SECTION (core/group)
   ------------------------------------------------------------------ */
.wp-block-group.is-style-orange-section {
	background-color: #3b82f6 !important;
	color: #FFFFFF !important;
}

.wp-block-group.is-style-orange-section h1,
.wp-block-group.is-style-orange-section h2,
.wp-block-group.is-style-orange-section h3,
.wp-block-group.is-style-orange-section p {
	color: #FFFFFF;
}

/* ------------------------------------------------------------------
   9. BLOCK STYLE — ORANGE PILL BUTTON (core/button)
   ------------------------------------------------------------------ */
.wp-block-button.is-style-blue-pill .wp-block-button__link {
	background-color: #3b82f6 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 9999px !important;
	font-weight: 700;
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.25);
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.wp-block-button.is-style-blue-pill .wp-block-button__link:hover {
	background-color: #2563eb !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

/* ------------------------------------------------------------------
   10. BLOCK STYLE — OUTLINE PILL BUTTON (core/button)
    ------------------------------------------------------------------ */
.wp-block-button.is-style-outline-pill .wp-block-button__link {
	background-color: transparent !important;
	color: inherit !important;
	border: 2px solid currentColor !important;
	border-radius: 9999px !important;
	font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-outline-pill .wp-block-button__link:hover {
	background-color: rgba(59, 130, 246, 0.1) !important;
	color: #3b82f6 !important;
	border-color: #3b82f6 !important;
}

/* ------------------------------------------------------------------
   11. BLOCK STYLE — WHITE ON DARK BUTTON (core/button)
   Used in: orange-section CTAs, dark section CTAs
   ------------------------------------------------------------------ */
.wp-block-button.is-style-white-on-dark .wp-block-button__link {
	background-color:#0f172a !important;
	color: #3b82f6 !important;
	border: none !important;
	border-radius: 9999px !important;
	font-weight: 700;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.wp-block-button.is-style-white-on-dark .wp-block-button__link:hover {
	background-color: rgba(59, 130, 246, 0.15) !important;
	color: #f8fafc !important;
}

/* ------------------------------------------------------------------
   12. BLOCK STYLE — OUTLINE WHITE BUTTON (core/button)
   Used in: dark/orange sections, secondary CTA on dark bg
   ------------------------------------------------------------------ */
.wp-block-button.is-style-outline-white .wp-block-button__link {
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 2px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: 9999px !important;
	font-weight: 700;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	background-color:#0f172a !important;
	color: #f8fafc !important;
	border-color: #FFFFFF !important;
}

/* ------------------------------------------------------------------
   13. BLOCK STYLE — ROUNDED XL IMAGE (core/image)
   ------------------------------------------------------------------ */
.wp-block-image.is-style-rounded-xl img,
.wp-block-image.is-style-rounded-xl figure {
	border-radius: 2.5rem !important;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   14. BLOCK STYLE — PREMIUM SHADOW IMAGE (core/image)
   ------------------------------------------------------------------ */
.wp-block-image.is-style-premium-shadow img {
	box-shadow: var(--ak-premium-shadow);
	border-radius: 2.5rem;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   15. BLOCK STYLE — ROUNDED XL + SHADOW COMBO (core/image)
   ------------------------------------------------------------------ */
.wp-block-image.is-style-hero-image img {
	border-radius: 2.5rem !important;
	box-shadow: var(--ak-premium-shadow) !important;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   16. MARQUEE ANIMATION
   Used in: home-gallery-marquee section
   Wrap the scrolling row in: class="ak-marquee-wrapper"
   ------------------------------------------------------------------ */
@keyframes ak-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.ak-marquee-wrapper {
	overflow: hidden;
}

.ak-marquee {
	display: flex;
	gap: 2rem;
	width: max-content;
	animation: ak-marquee 40s linear infinite;
	will-change: transform;
}

.ak-marquee:hover {
	animation-play-state: paused;
}

/* ------------------------------------------------------------------
   17. SCROLL-IN ANIMATIONS (IntersectionObserver driven)
   Add class="ak-animate-fadein" to any block via Additional CSS Class
   JS in animations.js adds .is-visible when element enters viewport
   ------------------------------------------------------------------ */
.ak-animate-fadein {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.ak-animate-fadein.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered children (add ak-stagger-children to parent) */
.ak-stagger-children > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.ak-stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.ak-stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: none; }
.ak-stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: none; }
.ak-stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: none; }
.ak-stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   18. HERO BADGE PILL
   Used in: home hero section ("Premium DOOH Network" label)
   Class: .ak-badge
   ------------------------------------------------------------------ */
.ak-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1rem;
	border-radius: 9999px;
	background: rgba(15, 23, 42, 0.6);
	border: 1px solid rgba(59, 130, 246, 0.3);
	color: #3b82f6;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ------------------------------------------------------------------
   19. STEP NUMBER BADGE
   Used in: "How It Works" section — numbered circle
   Class: .ak-step-number
   ------------------------------------------------------------------ */
.ak-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: #3b82f6;
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 1.25rem;
	font-weight: 900;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.wp-block-group:hover .ak-step-number {
	transform: scale(1.1);
}

/* ------------------------------------------------------------------
   20. STEP CARD HOVER BORDER
   Used in: "How It Works" cards — orange border on hover
   Class: .ak-step-card on the core/group
   ------------------------------------------------------------------ */
.ak-step-card {
	border: 1px solid var(--ak-border);
	border-radius: 1.5rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ak-step-card:hover {
	border-color: #3b82f6;
	box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* ------------------------------------------------------------------
   21. VENUE CATEGORY CARD HOVER (core/cover enhancements)
   ------------------------------------------------------------------ */
.ak-venue-card {
	border-radius: 1.5rem;
	overflow: hidden;
	transition: transform 0.35s ease;
}

.ak-venue-card:hover {
	transform: translateY(-8px);
}

.ak-venue-card img {
	transition: transform 0.5s ease;
}

.ak-venue-card:hover img {
	transform: scale(1.06);
}

/* ------------------------------------------------------------------
   22. GALLERY HOVER CARD
   Used in: residential-gallery, home-gallery sections
   Class: .ak-gallery-card on the core/cover or core/group
   ------------------------------------------------------------------ */
.ak-gallery-card {
	border-radius: 1.5rem;
	overflow: hidden;
	position: relative;
	transition: transform 0.35s ease;
}

.ak-gallery-card:hover {
	transform: translateY(-10px);
}

.ak-gallery-card img {
	transition: transform 0.5s ease;
}

.ak-gallery-card:hover img {
	transform: scale(1.1);
}

.ak-gallery-card .ak-gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
	color: #FFFFFF;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.ak-gallery-card:hover .ak-gallery-caption {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------------
   23. VISION TIMELINE
   Used in: about-vision-timeline section
   ------------------------------------------------------------------ */
.ak-timeline {
	position: relative;
}

.ak-timeline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ak-border);
}

.ak-timeline-dot {
	position: absolute;
	top: -0.5rem;
	left: 0;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: #3b82f6;
	border: 3px solid #0f172a;
	box-shadow: 0 0 0 2px #3b82f6;
}

/* ------------------------------------------------------------------
   24. COMPARISON CARD — White on Orange BG
   Used in: Why Better Than Social Ads section
   ------------------------------------------------------------------ */
.ak-comparison-winner {
	background:#0f172a;
	color: #3b82f6;
	border-radius: 1.5rem;
	transform: scale(1.04);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.ak-comparison-loser {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 1.5rem;
}

/* ------------------------------------------------------------------
   25. BRAND PILL TAGS
   Used in: "Best For These Brands" section (residential page)
   Class: .ak-brand-pill
   ------------------------------------------------------------------ */
.ak-brand-pill {
	display: inline-block;
	padding: 0.75rem 2rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-weight: 700;
	cursor: default;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ak-brand-pill:hover {
	background-color: #3b82f6;
	border-color: #3b82f6;
	color: #FFFFFF;
}

/* ------------------------------------------------------------------
   26. SECTION PLACEMENT BADGE
   Used in: residential placement grid (Lift Lobby, etc.)
   Class: .ak-placement-badge
   ------------------------------------------------------------------ */
.ak-placement-badge {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 1rem;
	padding: 1.5rem;
	text-align: center;
	transition: border-color 0.2s ease;
}

.ak-placement-badge:hover {
	border-color: #3b82f6;
}

.ak-placement-badge .ak-placement-icon {
	width: 2.5rem;
	height: 2.5rem;
	background: rgba(59, 130, 246, 0.10);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.75rem;
	color: #3b82f6;
}

/* ------------------------------------------------------------------
   27. FAQ / DETAILS BLOCK STYLING
   Styles the native core/details block to match React Accordion
   ------------------------------------------------------------------ */
.wp-block-details {
	border-bottom: 1px solid var(--ak-border);
	padding: 1.25rem 0;
	cursor: pointer;
}

.wp-block-details summary {
	font-size: 1.125rem;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: color 0.2s ease;
}

.wp-block-details summary:hover {
	color: #3b82f6;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: '+';
	font-size: 1.5rem;
	font-weight: 300;
	color: #3b82f6;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > *:not(summary) {
	color: #94a3b8;
	font-size: 1.0625rem;
	line-height: 1.7;
	padding-top: 0.75rem;
}

/* ------------------------------------------------------------------
   28. CONTACT CHANNEL CARD
   Used in: contact-channels section
   Class: .ak-channel-card
   ------------------------------------------------------------------ */
.ak-channel-card {
	background: #1e293b;
	border-radius: 1rem;
	padding: 1.5rem;
	transition: background-color 0.2s ease;
}

.ak-channel-card:hover {
	background-color: #EEEDE8;
}

.ak-channel-icon {
	width: 2.5rem;
	height: 2.5rem;
	background: rgba(59, 130, 246, 0.10);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3b82f6;
	margin-bottom: 1rem;
	transition: transform 0.2s ease;
}

.ak-channel-card:hover .ak-channel-icon {
	transform: scale(1.12);
}

/* ------------------------------------------------------------------
   29. STAT COUNTER BOX
   Used in: home-stats, about-stats patterns
   Class: .ak-stat-box
   ------------------------------------------------------------------ */
.ak-stat-box {
	text-align: center;
	padding: 1.5rem;
	border-radius: 1rem;
}

.ak-stat-value {
	font-family: 'Outfit', sans-serif;
	font-size: 2.5rem;
	font-weight: 900;
	color: #3b82f6;
	line-height: 1;
	display: block;
}

.ak-stat-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 0.25rem;
}

.ak-stat-sub {
	font-size: 0.75rem;
	color: #94a3b8;
	margin-top: 0.125rem;
}

/* ------------------------------------------------------------------
   30. HEADER SCROLL EFFECT
   JS in header-scroll.js adds .ak-scrolled to .ak-header
   ------------------------------------------------------------------ */

/* Kill ALL WordPress-injected spacing on header wrappers */
.wp-block-template-part:first-child,
header.wp-block-template-part {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}

#ak-site-header {
	padding: 1rem 1.5rem !important;
	margin: 0 !important;
	min-height: 0 !important;
}

#ak-site-header > .wp-block-group,
#ak-site-header > div.wp-block-group,
#ak-site-header > .wp-block-group.is-layout-flex,
#ak-site-header > div.wp-block-group.is-nowrap,
#ak-site-header > div[class*="wp-container"] {
	padding: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 auto !important;
	min-height: 0 !important;
}

.ak-header {
	background-color: rgba(15, 23, 42, 0.95) !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	transition: background-color 0.3s ease,
	            box-shadow 0.3s ease,
	            padding 0.3s ease;
}

.ak-header.ak-scrolled,
#ak-site-header.is-scrolled {
	background-color: rgba(15, 23, 42, 0.95) !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

@media (max-width: 782px) {
	#ak-site-header {
		padding: 0.6rem 0.75rem !important;
	}
	#ak-site-header.is-scrolled {
		padding: 0.5rem 0.75rem !important;
	}
	/* Shrink logo for compact mobile header */
	#ak-site-header .ak-logo-link {
		gap: 0.35rem !important;
	}
	#ak-site-header .ak-logo-link span {
		font-size: 1rem !important;
	}
	#ak-site-header .ak-logo-link div {
		width: 1.75rem !important;
		height: 1.75rem !important;
		border-radius: 0.5rem !important;
	}
	#ak-site-header .ak-logo-link svg {
		width: 14px !important;
		height: 14px !important;
	}
}

/* ------------------------------------------------------------------
   31. GENERAL SECTION WRAPPERS
   Max-width containers used across all sections
   ------------------------------------------------------------------ */
.ak-section {
	padding-block: 5rem;
	padding-inline: 1.5rem;
}

.ak-section-lg {
	padding-block: 8rem;
	padding-inline: 1.5rem;
}

.ak-container {
	max-width: 1280px;
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   32. TESTIMONIAL CARD
   ------------------------------------------------------------------ */
.ak-testimonial-card {
	background: #1e293b;
	border-radius: 1.5rem;
	padding: 2.5rem;
	position: relative;
	overflow: hidden;
}

.ak-star-rating {
	display: flex;
	gap: 0.2rem;
	margin-bottom: 1.5rem;
	color: #3b82f6;
}

/* ------------------------------------------------------------------
   33. SOCIAL LINKS
   ------------------------------------------------------------------ */
.wp-block-social-links .wp-block-social-link a {
	background-color: #1e293b !important;
	border-radius: 50% !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-social-links .wp-block-social-link a:hover {
	background-color: #3b82f6 !important;
	color: #FFFFFF !important;
}

/* ------------------------------------------------------------------
   34. RESPONSIVE HELPERS
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.ak-section    { padding-block: 3rem; }
	.ak-section-lg { padding-block: 4.5rem; }

	.ak-marquee { animation-duration: 25s; }

	.ak-comparison-winner { transform: scale(1); }
}

@media (max-width: 480px) {
	.ak-section    { padding-block: 2.5rem; padding-inline: 1rem; }
	.ak-section-lg { padding-block: 3.5rem; padding-inline: 1rem; }
}

/* ------------------------------------------------------------------
   35. FOOTER LINK LIST
   Styles the core/list inside the footer columns
   ------------------------------------------------------------------ */
.ak-footer-links {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0;
}

.ak-footer-links li {
	margin-top: 0 !important;
	margin-bottom: 0.875rem;
}

.ak-footer-links li a {
	color: #94a3b8;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color 0.2s ease;
}

.ak-footer-links li a:hover {
	color: #3b82f6;
}

/* ------------------------------------------------------------------
   36. HEADER NAVIGATION DROPDOWN STYLES
   ------------------------------------------------------------------ */

/* Hide desktop actions on mobile (handled by navigation overlay) */
@media (max-width: 1023px) {
	.ak-header-actions {
		display: none !important;
	}
	.ak-desktop-nav {
		flex-grow: 1;
		justify-content: flex-end;
	}
}

/* Nav link hover */
.ak-header .wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: 0.5rem;
	transition: color 0.2s ease, background-color 0.15s ease;
	color: #94a3b8;
	font-size: 0.875rem;
	font-weight: 500;
}

.ak-header .wp-block-navigation-item__content:hover {
	color: #3b82f6;
}

/* Dropdown submenu panel — base */
.ak-header .wp-block-navigation__submenu-container {
	background: rgba(15, 23, 42, 0.97) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid #334155 !important;
	border-radius: 1rem !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
	min-width: 220px;
	padding: 0.5rem !important;
	overflow: visible !important;
	margin-top: 0 !important;
	/* Override WP's forced max-content width */
	width: auto !important;
	white-space: normal !important;
}

/* Invisible bridge so mouse doesn't lose hover */
.ak-header .wp-block-navigation__submenu-container::before {
	content: '';
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
	height: 15px;
	background: transparent;
}

/* Dropdown items — base */
.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	margin-bottom: 0.125rem !important;
}
.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	margin-bottom: 0 !important;
}

.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 0.5rem;
	padding: 0.75rem 1rem !important;
	font-size: 0.875rem !important;
	display: block !important;
	width: 100% !important;
	line-height: 1.4 !important;
	white-space: normal !important;
}

.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: #1e293b;
	color: #3b82f6;
}

/* ═══════════════════════════════════════════════
   RICH MEGA MENU — "Advertise In" dropdown
   ═══════════════════════════════════════════════ */

/* Widen the container when it holds rich links */
.ak-header .has-child .wp-block-navigation__submenu-container:has(.ak-nav-rich-link),
.ak-header .wp-block-navigation__submenu-container.ak-mega-menu {
	min-width: 420px !important;
	width: 420px !important;
	padding: 0.625rem !important;
}

/* Each rich link row */
.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content.ak-nav-rich-link {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.875rem !important;
	padding: 0.875rem 1rem !important;
	border-radius: 0.625rem !important;
	text-decoration: none !important;
	transition: background 0.2s ease, transform 0.2s ease !important;
	white-space: normal !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content.ak-nav-rich-link:hover {
	background: rgba(30, 41, 59, 0.7) !important;
	transform: translateX(3px);
}

/* Icon box */
.ak-nav-rich-icon {
	color: #3b82f6 !important;
	background: rgba(59, 130, 246, 0.1) !important;
	min-width: 2.5rem !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	border-radius: 0.625rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1rem !important;
	flex-shrink: 0 !important;
	transition: background 0.3s ease, transform 0.3s ease !important;
}

.ak-nav-rich-link:hover .ak-nav-rich-icon {
	background: rgba(59, 130, 246, 0.2) !important;
	transform: scale(1.08);
}

/* Text column */
.ak-nav-rich-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.2rem !important;
	flex: 1 !important;
	min-width: 0 !important;
}

/* Category name */
.ak-nav-rich-title {
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	color: #f1f5f9 !important;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	transition: color 0.2s ease !important;
}

.ak-nav-rich-link:hover .ak-nav-rich-title {
	color: #3b82f6 !important;
}

/* Helper text */
.ak-nav-rich-helper {
	font-size: 0.75rem !important;
	color: #64748b !important;
	line-height: 1.45 !important;
	font-weight: 400 !important;
	white-space: normal !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

/* Mobile overlay nav */
.ak-header .wp-block-navigation__responsive-container.is-menu-open {
	background: #0f172a;
	padding: 2rem 1.5rem;
}

/* Partner Venue link */
.ak-partner-link {
	font-size: 0.875rem;
	font-weight: 700;
	color: #94a3b8;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.ak-partner-link:hover {
	color: #3b82f6;
}

/* ------------------------------------------------------------------
   37. SOCIAL LINKS (footer)
   ------------------------------------------------------------------ */
.ak-social-links .wp-block-social-link a {
	background-color: #1e293b !important;
	border-radius: 50% !important;
	width: 2.25rem !important;
	height: 2.25rem !important;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.ak-social-links .wp-block-social-link a:hover {
	background-color: #3b82f6 !important;
	transform: translateY(-2px);
}

.ak-social-links .wp-block-social-link-anchor svg {
	fill: #f8fafc !important;
	transition: fill 0.2s ease;
}

.ak-social-links .wp-block-social-link a:hover svg {
	fill: #FFFFFF !important;
}

/* ------------------------------------------------------------------
   38. LOGO LINK
   ------------------------------------------------------------------ */
.ak-logo-link {
	text-decoration: none !important;
}

.ak-logo-link:hover span[style*="background:#3b82f6"] {
	box-shadow: 0 0 28px rgba(59, 130, 246, 0.35) !important;
}


/* ── MESMERIZING ANIMATIONS ── */

@keyframes ak-fade-in-up {
	0% { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(8px); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes ak-fade-in-left {
	0% { opacity: 0; transform: translateX(-40px); filter: blur(4px); }
	100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes ak-fade-in-right {
	0% { opacity: 0; transform: translateX(40px); filter: blur(4px); }
	100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes ak-soft-zoom {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@keyframes ak-pulse-glow {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(1.1); }
}

/* Scroll Reveal Base */
.ak-reveal {
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform, filter;
}

.ak-reveal-up { transform: translateY(50px); }
.ak-reveal-left { transform: translateX(-50px); }
.ak-reveal-right { transform: translateX(50px); }
.ak-reveal-zoom { transform: scale(0.95); }

.ak-reveal.active {
	opacity: 1;
	transform: translate(0) scale(1);
	filter: blur(0);
}

/* Staggered Children */
.ak-stagger > * { opacity: 0; }
.ak-stagger.active > *:nth-child(1) { animation: ak-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.1s; }
.ak-stagger.active > *:nth-child(2) { animation: ak-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.2s; }
.ak-stagger.active > *:nth-child(3) { animation: ak-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.3s; }
.ak-stagger.active > *:nth-child(4) { animation: ak-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.4s; }
.ak-stagger.active > *:nth-child(5) { animation: ak-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.5s; }

/* Interactive Hover Glow */
.ak-hover-glow {
	position: relative;
	overflow: hidden;
}

.ak-hover-glow::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(600px circle at var(--x) var(--y), rgba(59, 130, 246, 0.15), transparent 40%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.ak-hover-glow:hover::after {
	opacity: 1;
}

/* ── INTERACTIVE HOVER UTILITIES ── */

.ak-interactive-card {
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.ak-interactive-card:hover {
	transform: translateY(-8px) scale(1.02) !important;
	border-color: rgba(59, 130, 246, 0.4) !important;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important;
	z-index: 20;
}

/* Specific inner element animations on card hover */
.ak-interactive-card:hover svg {
	transform: scale(1.2) rotate(5deg);
	color: #3b82f6 !important;
}

.ak-interactive-card:hover img {
	transform: scale(1.1);
}

.ak-interactive-card svg, .ak-interactive-card img {
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s ease !important;
}

/* ── GLOBAL MOBILE RESPONSIVENESS ── */

@media (max-width: 782px) {
    /* Padding Reductions - Exclude header from global group padding */
    .wp-block-group:not(.ak-header), section, .ak-section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .ak-hero-section {
        padding-top: 6rem !important;
    }

    /* Font Size Reductions */
    h1 { font-size: 2.75rem !important; line-height: 1.1 !important; }
    h2 { font-size: 2rem !important; line-height: 1.2 !important; }
    h3 { font-size: 1.5rem !important; }
    
    p { font-size: 1rem !important; }

    /* Column Stacking */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Button adjustments */
    .wp-block-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .wp-block-button, .wp-block-button__link {
        width: 100% !important;
        text-align: center;
    }
    
    /* Footer adjustments */
    .ak-footer .wp-block-columns {
        text-align: center;
    }
    
    .ak-footer .ak-logo-link {
        justify-content: center;
    }
    
    .ak-social-wrapper {
        justify-content: center !important;
    }
}

/* ── MOBILE MENU OVERLAY FIX ── */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

.wp-block-navigation__responsive-container-close-button,
.wp-block-navigation__responsive-container-open-button {
    color: #f8fafc !important;
}

}