/* ==========================================================================
   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) !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; }
.elementor-icon-box-title, .elementor-icon-box-title span { color: var(--ak-navy) !important; }
.ak-section--dark .elementor-icon-box-title, .ak-section--dark .elementor-icon-box-title span,
.ak-bg-dark .elementor-icon-box-title, .ak-bg-dark .elementor-icon-box-title span { 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);
}

/* --------------------------------------------------------------------------
   Header (sticky, transparent -> solid on scroll; class toggled by main.js)
   -------------------------------------------------------------------------- */
.ak-header {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important;
	z-index: 999 !important;
	background: 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);
	padding: var(--space-5) 0;
}
.ak-header.is-scrolled {
	background: rgba(8,22,35,0.75);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-md);
	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. Swap this
   once a real logo image is uploaded via Customizer -> Site Identity. */
.ak-header__logo, .ak-header__logo .elementor-heading-title {
	color: var(--ak-white) !important;
	font-family: var(--ak-font-heading);
	font-weight: 700;
	margin: 0;
}
.ak-header__nav .elementor-item {
	color: rgba(255,255,255,0.85) !important;
}
.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;
	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; }