/* ==========================================================================
   AK ENTERPRISES — REUSABLE COMPONENTS
   Buttons, cards, badges, glass panels, headers/footer building blocks.
   These classes get applied to Elementor widgets via the "CSS Classes"
   advanced control, so no code edits are needed to reuse them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   NOTE: Elementor's "CSS Classes" control lands on the widget's *wrapper*
   div (.elementor-widget-button), not on the rendered <a class="elementor-button">
   inside it. Every rule below therefore targets ".ak-btn .elementor-button"
   (the actual clickable element) and uses !important where Elementor's own
   per-element generated CSS (e.g. its default background-color) would
   otherwise win on specificity.
   -------------------------------------------------------------------------- */
.ak-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--ak-font-heading);
	font-weight: 600;
	font-size: var(--fs-body);
	letter-spacing: 0.02em;
	padding: 16px 32px;
	border-radius: var(--radius-md);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform var(--dur-micro) var(--ease-out),
	            box-shadow var(--dur-micro) var(--ease-out),
	            background var(--dur-micro) var(--ease-out),
	            color var(--dur-micro) var(--ease-out);
	min-height: 44px;
}
.ak-btn .elementor-button:focus-visible { outline: 2px solid var(--ak-teal); outline-offset: 2px; }

.ak-btn--primary .elementor-button {
	background: var(--ak-gradient-primary) !important;
	color: var(--ak-white) !important;
	box-shadow: var(--shadow-sm);
}
.ak-btn--primary .elementor-button:hover {
	color: var(--ak-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.ak-btn--secondary .elementor-button {
	background: transparent !important;
	border-color: rgba(11,31,58,0.25);
	color: var(--ak-navy) !important;
}
.ak-btn--secondary .elementor-button:hover {
	background: var(--ak-navy) !important;
	border-color: var(--ak-navy);
	color: var(--ak-white) !important;
	transform: translateY(-2px);
}
.ak-section--dark .ak-btn--secondary .elementor-button,
.ak-bg-dark .ak-btn--secondary .elementor-button,
.ak-bg-gradient-primary .ak-btn--secondary .elementor-button {
	border-color: rgba(255,255,255,0.35);
	color: var(--ak-white) !important;
}
.ak-section--dark .ak-btn--secondary .elementor-button:hover,
.ak-bg-dark .ak-btn--secondary .elementor-button:hover,
.ak-bg-gradient-primary .ak-btn--secondary .elementor-button:hover {
	background: var(--ak-white) !important;
	color: var(--ak-navy) !important;
	border-color: var(--ak-white);
}

.ak-btn--text .elementor-button {
	background: none !important;
	color: var(--ak-blue-text) !important;
	padding: 4px 0;
	border-radius: 0;
	position: relative;
}
.ak-btn--text .elementor-button::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--ak-teal);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur-micro) var(--ease-out);
}
.ak-btn--text:hover .elementor-button::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.ak-card {
	background: var(--ak-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
	transition: transform var(--dur-section) var(--ease-out), box-shadow var(--dur-section) var(--ease-out);
	height: 100%;
}
.ak-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.ak-card__icon {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	background: var(--ak-gradient-accent);
	box-shadow: var(--shadow-glow);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-5);
	color: var(--ak-white);
}

.ak-card__title { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.ak-card__text { font-size: var(--fs-body); margin-bottom: 0; }

/* Every Icon-Box widget site-wide gets the accent-gradient badge treatment
   from the design system, rather than Elementor's unstyled default icon. */
.elementor-icon-box-icon .elementor-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	background: var(--ak-gradient-accent) !important;
	color: var(--ak-white) !important;
	box-shadow: var(--shadow-glow);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.elementor-icon-box-icon .elementor-icon svg { width: 28px; height: 28px; }
.ak-section--dark .elementor-icon-box-title,
.ak-bg-dark .elementor-icon-box-title { color: var(--ak-white) !important; }
.ak-section--dark .elementor-icon-box-description,
.ak-bg-dark .elementor-icon-box-description { color: rgba(234,242,251,0.75) !important; }

/* --------------------------------------------------------------------------
   Glass panels
   -------------------------------------------------------------------------- */
.ak-glass {
	background: var(--glass-bg-dark);
	border: 1px solid var(--glass-border-dark);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-radius: var(--radius-lg);
}
.ak-glass--light {
	background: var(--glass-bg-light);
	border-color: var(--glass-border-light);
}

/* --------------------------------------------------------------------------
   Badges / pills
   -------------------------------------------------------------------------- */
.ak-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--ak-font-heading);
	font-size: var(--fs-small);
	font-weight: 600;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: rgba(0,159,227,0.1);
	color: var(--ak-blue);
	/* NOTE: .ak-badge is only ever used over a dark background (the hero),
	   where the brighter --ak-blue already contrasts at ~5.5:1. Don't
	   swap this to --ak-blue-text without first checking it isn't reused
	   on a light section, where that same bright blue would fail AA. */
}

/* --------------------------------------------------------------------------
   Header (sticky, transparent -> glassmorphism on scroll; .is-scrolled
   toggled by main.js's initHeaderScrollState()). Reworked 2026-08-16:
   the logo-group and CTA button now get explicit flex-grow/shrink:0 in the
   Elementor data (post 20, containers aklogo2 / 0000003) -- Elementor
   Containers default every flex child to _flex_grow:1 unless told
   otherwise, which was silently stretching the logo wrapper to ~560px and
   starving the 8-item nav-menu of room, forcing it onto 3 lines. The
   nav-menu (0000002) got the matching _flex_grow:1 so it alone claims the
   leftover space between logo and button; boxed_width was widened to
   1400px (up from the Kit's default ~1140/1200px) so that leftover space
   is actually enough for 8 items without cramming. Belt-and-suspenders
   flex/white-space rules below hold even if that JSON ever drifts. */
.ak-header {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important;
	z-index: 999 !important;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--dur-section) var(--ease-out),
	            box-shadow var(--dur-section) var(--ease-out),
	            backdrop-filter var(--dur-section) var(--ease-out),
	            border-color var(--dur-section) var(--ease-out),
	            padding var(--dur-section) var(--ease-out);
	padding: var(--space-5) 0;
}
.ak-header.is-scrolled {
	background: rgba(8,18,32,0.68);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border-bottom-color: rgba(255,255,255,0.08);
	box-shadow: 0 8px 32px rgba(3,10,20,0.28);
	padding: var(--space-3) 0;
}
/* Header sits over the dark hero (and a dark glass bg once scrolled), so the
   text-based logo/nav need to be light-colored in both states. */
.ak-header__logo, .ak-header__logo .elementor-heading-title {
	color: var(--ak-white) !important;
	font-family: var(--ak-font-heading);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0;
	white-space: nowrap;
}
/* Elementor Containers default their literal `width` to 100% of their
   parent (a base .e-con rule, not a flex-grow mechanism), which becomes
   this item's flex-basis since ours is auto -- so flex-grow/shrink:0 alone
   left it locked at the parent row's full 1400px. width:auto (shrink to
   content) is what actually fixes it. */
.ak-header__logo-group {
	flex: 0 0 auto !important;
	width: auto !important;
	transition: transform var(--dur-section) var(--ease-out);
}
.ak-header.is-scrolled .ak-header__logo-group { transform: scale(0.92); transform-origin: left center; }

/* Logo mark (icon-only PNG, no wordmark baked in) paired with the existing
   text-based site title above -- sized to nav-bar height, auto width so the
   ~1.68:1 source aspect ratio isn't distorted. */
.ak-header__logo-mark img {
	height: 36px !important;
	width: auto !important;
	display: block;
}
.ak-footer__logo-mark img {
	height: 48px !important;
	width: auto !important;
	display: block;
}

/* Nav: guaranteed single line regardless of item count -- centered in the
   flexible middle slot Elementor's own flex-grow:1 (set on 0000002) gives
   it, with tightened item padding so 8 items comfortably fit down to
   ~1280px-wide laptop screens before the burger breakpoint takes over. */
.ak-header__nav {
	flex: 1 1 auto !important;
	min-width: 0;
}
.ak-header__nav .elementor-nav-menu--main {
	justify-content: center;
}
.ak-header__nav ul.elementor-nav-menu {
	flex-wrap: nowrap !important;
}
.ak-header__nav .elementor-item {
	color: rgba(255,255,255,0.8) !important;
	white-space: nowrap;
	padding: 12px 16px !important;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.ak-header__nav .elementor-item:hover,
.ak-header__nav .elementor-item.elementor-item-active {
	color: var(--ak-white) !important;
}

/* --------------------------------------------------------------------------
   Stat counters (numbers driven by GSAP ScrollTrigger in Phase 4)
   NOTE: targets Elementor's actual rendered number/suffix elements, since
   the .ak-stat__number class itself lands on the counter widget's wrapper.
   -------------------------------------------------------------------------- */
.ak-stat__number .elementor-counter-number-wrapper {
	font-family: var(--ak-font-heading);
	font-weight: 700;
	font-size: var(--fs-h1);
	background: var(--ak-gradient-accent);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.ak-stat__label {
	font-size: var(--fs-body);
	color: var(--ak-text-muted);
}

/* --------------------------------------------------------------------------
   Back-to-top + floating WhatsApp button (wired up in main.js / Contact page)
   -------------------------------------------------------------------------- */
.ak-float-btn {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	z-index: 998;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.ak-float-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ak-float-btn--whatsapp { background: #25D366; color: var(--ak-white); bottom: calc(var(--space-5) + 72px); }
.ak-float-btn--top { background: var(--ak-navy); color: var(--ak-white); }

/* --------------------------------------------------------------------------
   Process timeline — used on the homepage AND the About page, so it lives
   here (site-wide) rather than in home.css (front-page only).
   -------------------------------------------------------------------------- */
.ak-timeline { position: relative; }
.ak-timeline::before {
	content: '';
	position: absolute;
	top: 32px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ak-teal), transparent);
	z-index: 0;
	/* Phase 4 (GSAP) animates --timeline-progress from 0 -> 1 as a "drawing"
	   effect. Defaults to fully drawn (1) so the line is never hidden if
	   GSAP fails to load or prefers-reduced-motion is set. */
	transform-origin: left center;
	transform: scaleX(var(--timeline-progress, 1));
}
.ak-timeline__step { position: relative; z-index: 1; text-align: center; }
.ak-timeline__step .elementor-icon-box-icon { margin: 0 auto; }