/* =========================================================================
   UniKlinger Child Theme — Main Stylesheet
   Design tokens, global typography, buttons, utilities.
   Author: Indscope (AR Nayak)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. CSS Variables (Design Tokens)
   ------------------------------------------------------------------------- */
:root {

	/* Brand colors */
	--ukl-blue:        #025198;
	--ukl-blue-dark:   #013a6e;
	--ukl-blue-light:  #e9f0f7;
	--ukl-pink:        #DB1F51;
	--ukl-pink-dark:   #b3173f;
	--ukl-pink-light:  #fce4eb;

	/* Gradients */
	--ukl-gradient:           linear-gradient(90deg, #025198 0%, #DB1F51 100%);
	--ukl-gradient-reverse:   linear-gradient(90deg, #DB1F51 0%, #025198 100%);
	--ukl-gradient-soft:      linear-gradient(135deg, rgba(2,81,152,0.05), rgba(219,31,81,0.08));
	--ukl-gradient-banner:    linear-gradient(105deg, #DB1F51 0%, #6f2a8a 35%, #025198 100%);
	--ukl-curve-pink:         radial-gradient(circle at 50% 60%, rgba(219,31,81,0.25) 0%, rgba(219,31,81,0.08) 40%, transparent 70%);

	/* Neutrals */
	--ukl-text-dark:   #1A1F2E;
	--ukl-text-body:   #2D3748;
	--ukl-text-muted:  #6B7280;
	--ukl-text-light:  #9CA3AF;
	--ukl-border:      #E5E7EB;
	--ukl-border-soft: #F3F4F6;
	--ukl-bg-light:    #F4F6FA;
	--ukl-bg-card:     #FFFFFF;
	--ukl-white:       #FFFFFF;

	/* Typography */
	--ukl-font-heading: 'DM Sans', system-ui, -apple-system, sans-serif;
	--ukl-font-body:    'Open Sans', system-ui, -apple-system, sans-serif;

	/* Type scale */
	--ukl-fs-h1: clamp(2.25rem, 4vw + 1rem, 4rem);     /* 36 → 64 */
	--ukl-fs-h2: clamp(1.875rem, 2.5vw + 1rem, 3rem);  /* 30 → 48 */
	--ukl-fs-h3: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); /* 24 → 36 */
	--ukl-fs-h4: clamp(1.25rem, 1vw + 0.75rem, 1.75rem);/* 20 → 28 */
	--ukl-fs-h5: 1.25rem; /* 20 */
	--ukl-fs-h6: 1.125rem;/* 18 */
	--ukl-fs-body: 1.125rem; /* 18px per spec */
	--ukl-fs-button: 1.25rem;/* 20px per spec */
	--ukl-fs-small: 0.9375rem;
	--ukl-fs-xs: 0.8125rem;

	/* Line-heights */
	--ukl-lh-tight:  1.15;
	--ukl-lh-snug:   1.3;
	--ukl-lh-normal: 1.55;
	--ukl-lh-loose:  1.75;

	/* Radius */
	--ukl-radius-sm:  4px;
	--ukl-radius:     8px;
	--ukl-radius-md:  12px;
	--ukl-radius-lg:  16px;
	--ukl-radius-xl:  24px;
	--ukl-radius-pill: 999px;

	/* Shadows */
	--ukl-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
	--ukl-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
	--ukl-shadow:    0 6px 18px rgba(15, 23, 42, 0.08);
	--ukl-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.10);
	--ukl-shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.14);
	--ukl-shadow-pink: 0 12px 28px rgba(219, 31, 81, 0.25);
	--ukl-shadow-blue: 0 12px 28px rgba(2, 81, 152, 0.25);

	/* Spacing scale (8pt grid) */
	--ukl-space-1: 0.25rem;  /* 4  */
	--ukl-space-2: 0.5rem;   /* 8  */
	--ukl-space-3: 0.75rem;  /* 12 */
	--ukl-space-4: 1rem;     /* 16 */
	--ukl-space-5: 1.5rem;   /* 24 */
	--ukl-space-6: 2rem;     /* 32 */
	--ukl-space-7: 2.5rem;   /* 40 */
	--ukl-space-8: 3rem;     /* 48 */
	--ukl-space-9: 4rem;     /* 64 */
	--ukl-space-10: 5rem;    /* 80 */
	--ukl-space-12: 6rem;    /* 96 */

	/* Layout */
	--ukl-container: 1280px;
	--ukl-container-wide: 1440px;
	--ukl-container-narrow: 1080px;
	--ukl-header-height: 88px;
	--ukl-header-height-mobile: 72px;

	/* Motion */
	--ukl-ease:      cubic-bezier(0.4, 0, 0.2, 1);
	--ukl-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--ukl-duration:  280ms;
	--ukl-duration-slow: 480ms;

	/* Z-index */
	--ukl-z-dropdown: 100;
	--ukl-z-sticky:   200;
	--ukl-z-header:   300;
	--ukl-z-modal:    400;
	--ukl-z-toast:    500;
}

/* -------------------------------------------------------------------------
   2. Base / Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.no-scroll { overflow: hidden; }

body.ukl-theme {
	margin: 0;
	font-family: var(--ukl-font-body);
	font-size: var(--ukl-fs-body);
	line-height: var(--ukl-lh-normal);
	color: var(--ukl-text-body);
	background: var(--ukl-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.ukl-theme.no-scroll { overflow: hidden; }

/* -------------------------------------------------------------------------
   3. Headings — DM Sans, distinctive
   ------------------------------------------------------------------------- */
.ukl-theme h1, .ukl-theme h2, .ukl-theme h3,
.ukl-theme h4, .ukl-theme h5, .ukl-theme h6,
.ukl-heading {
	font-family: var(--ukl-font-heading);
	color: var(--ukl-text-dark);
	font-weight: 700;
	line-height: var(--ukl-lh-tight);
	letter-spacing: -0.01em;
	margin: 0 0 var(--ukl-space-4);
}

.ukl-theme h1, .ukl-h1 { font-size: var(--ukl-fs-h1); font-weight: 800; }
.ukl-theme h2, .ukl-h2 { font-size: var(--ukl-fs-h2); }
.ukl-theme h3, .ukl-h3 { font-size: var(--ukl-fs-h3); }
.ukl-theme h4, .ukl-h4 { font-size: var(--ukl-fs-h4); font-weight: 600; }
.ukl-theme h5, .ukl-h5 { font-size: var(--ukl-fs-h5); font-weight: 600; }
.ukl-theme h6, .ukl-h6 { font-size: var(--ukl-fs-h6); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* The signature two-tone headline (e.g. "Solutions Industry Wise") */
.ukl-title-split {
	font-family: var(--ukl-font-heading);
	font-weight: 800;
	color: var(--ukl-text-dark);
}
.ukl-title-split em,
.ukl-title-split .alt {
	font-style: normal;
	font-weight: 400;
	color: var(--ukl-text-dark);
}

/* Bold + light pair — when the first word is heavy and rest is light */
.ukl-title-pair strong { font-weight: 800; }
.ukl-title-pair span   { font-weight: 400; }

/* -------------------------------------------------------------------------
   4. Body text & links
   ------------------------------------------------------------------------- */
.ukl-theme p {
	font-family: var(--ukl-font-body);
	font-size: var(--ukl-fs-body);
	line-height: var(--ukl-lh-loose);
	color: var(--ukl-text-body);
	margin: 0 0 var(--ukl-space-4);
}

.ukl-theme a {
	color: var(--ukl-blue);
	text-decoration: none;
	transition: color var(--ukl-duration) var(--ukl-ease);
}
.ukl-theme a:hover { color: var(--ukl-pink); }

.ukl-text-muted { color: var(--ukl-text-muted); }
.ukl-text-small { font-size: var(--ukl-fs-small); }
.ukl-text-xs    { font-size: var(--ukl-fs-xs); }

.ukl-eyebrow {
	font-family: var(--ukl-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ukl-pink);
	margin-bottom: var(--ukl-space-3);
	display: inline-block;
}

/* -------------------------------------------------------------------------
   5. Buttons — pill style with brand gradient
   ------------------------------------------------------------------------- */
.ukl-btn,
.ukl-theme .elementor-button.ukl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.875rem 2rem;
	border-radius: var(--ukl-radius-pill);
	font-family: var(--ukl-font-body);
	font-size: var(--ukl-fs-button);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--ukl-duration) var(--ukl-ease),
				box-shadow var(--ukl-duration) var(--ukl-ease),
				background var(--ukl-duration) var(--ukl-ease),
				color var(--ukl-duration) var(--ukl-ease);
	text-decoration: none;
	white-space: nowrap;
}

/* Primary — gradient fill */
.ukl-btn-primary,
.ukl-theme .elementor-button.ukl-btn-primary {
	background: var(--ukl-gradient);
	color: var(--ukl-white);
	box-shadow: var(--ukl-shadow-sm);
}
.ukl-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--ukl-shadow-pink);
	color: var(--ukl-white);
}

/* Secondary — outlined */
.ukl-btn-secondary {
	background: transparent;
	color: var(--ukl-text-dark);
	border-color: var(--ukl-border);
}
.ukl-btn-secondary:hover {
	border-color: var(--ukl-pink);
	color: var(--ukl-pink);
	transform: translateY(-2px);
}

/* Ghost — text + arrow underline pattern */
.ukl-btn-ghost,
.ukl-link-arrow {
	background: transparent;
	color: var(--ukl-text-dark);
	border: none;
	padding: 0.25rem 0;
	font-weight: 600;
	font-size: var(--ukl-fs-body);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
}
.ukl-link-arrow::after {
	content: '';
	position: absolute;
	left: 0; right: 35%;
	bottom: -2px;
	height: 2px;
	background: var(--ukl-gradient);
	transition: right var(--ukl-duration) var(--ukl-ease);
}
.ukl-link-arrow:hover { color: var(--ukl-text-dark); }
.ukl-link-arrow:hover::after { right: 0; }

/* Round arrow button (used on carousel cards) */
.ukl-btn-round {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ukl-gradient);
	color: var(--ukl-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: transform var(--ukl-duration) var(--ukl-ease), box-shadow var(--ukl-duration) var(--ukl-ease);
	box-shadow: var(--ukl-shadow-sm);
}
.ukl-btn-round:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: var(--ukl-shadow-pink);
	color: var(--ukl-white);
}

/* -------------------------------------------------------------------------
   6. Layout containers + section padding
   ------------------------------------------------------------------------- */
.ukl-container       { max-width: var(--ukl-container); margin: 0 auto; padding: 0 var(--ukl-space-5); }
.ukl-container-wide  { max-width: var(--ukl-container-wide);   margin: 0 auto; padding: 0 var(--ukl-space-5); }
.ukl-container-narrow{ max-width: var(--ukl-container-narrow); margin: 0 auto; padding: 0 var(--ukl-space-5); }

.ukl-section { padding: var(--ukl-space-10) 0; position: relative; }
.ukl-section-sm { padding: var(--ukl-space-7) 0; }
.ukl-section-lg { padding: var(--ukl-space-12) 0; }

/* Decorative pink curve used in About hero and footer */
.ukl-curve-decor {
	position: absolute;
	pointer-events: none;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: var(--ukl-curve-pink);
	filter: blur(2px);
	z-index: 0;
}

/* -------------------------------------------------------------------------
   7. Form elements — global override
   ------------------------------------------------------------------------- */
.ukl-theme input[type="text"],
.ukl-theme input[type="email"],
.ukl-theme input[type="tel"],
.ukl-theme input[type="search"],
.ukl-theme input[type="url"],
.ukl-theme input[type="number"],
.ukl-theme textarea,
.ukl-theme select,
.ukl-theme .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	font-family: var(--ukl-font-body);
	font-size: var(--ukl-fs-body);
	color: var(--ukl-text-dark);
	background: transparent;
	border: none;
	border-bottom: 1.5px solid rgba(255,255,255,0.4);
	padding: 0.75rem 0;
	transition: border-color var(--ukl-duration) var(--ukl-ease);
	border-radius: 0;
}

.ukl-theme input::placeholder,
.ukl-theme textarea::placeholder {
	color: var(--ukl-text-muted);
}

.ukl-theme input:focus,
.ukl-theme textarea:focus,
.ukl-theme select:focus {
	outline: none;
	border-bottom-color: var(--ukl-pink);
}

/* Form inside dark gradient panel — placeholders go white-ish */
.ukl-form-on-gradient input::placeholder,
.ukl-form-on-gradient textarea::placeholder {
	color: rgba(255,255,255,0.7);
}
.ukl-form-on-gradient input,
.ukl-form-on-gradient textarea {
	color: var(--ukl-white);
	border-bottom-color: rgba(255,255,255,0.35);
}

/* -------------------------------------------------------------------------
   8. Cards (used in multiple places)
   ------------------------------------------------------------------------- */
.ukl-card {
	background: var(--ukl-bg-card);
	border: 1px solid var(--ukl-border-soft);
	border-radius: var(--ukl-radius-md);
	overflow: hidden;
	transition: transform var(--ukl-duration) var(--ukl-ease),
				box-shadow var(--ukl-duration) var(--ukl-ease),
				border-color var(--ukl-duration) var(--ukl-ease);
}
.ukl-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ukl-shadow-md);
	border-color: transparent;
}

/* -------------------------------------------------------------------------
   9. Utilities
   ------------------------------------------------------------------------- */
.ukl-text-gradient {
	background: var(--ukl-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ukl-bg-light    { background: var(--ukl-bg-light); }
.ukl-bg-blue     { background: var(--ukl-blue); color: var(--ukl-white); }
.ukl-bg-gradient { background: var(--ukl-gradient); color: var(--ukl-white); }

.ukl-flex        { display: flex; }
.ukl-flex-center { display: flex; align-items: center; justify-content: center; }
.ukl-grid        { display: grid; }

.ukl-visually-hidden {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	overflow: hidden;
	height: 1px; width: 1px;
	word-wrap: normal;
}

/* -------------------------------------------------------------------------
  10. Selection highlight + scrollbar (small flourishes)
   ------------------------------------------------------------------------- */
::selection {
	background: var(--ukl-pink);
	color: var(--ukl-white);
}

/* -------------------------------------------------------------------------
  11. Responsive helpers
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root { --ukl-header-height: 72px; }
	.ukl-section    { padding: var(--ukl-space-8) 0; }
	.ukl-section-lg { padding: var(--ukl-space-10) 0; }
}

@media (max-width: 767px) {
	.ukl-section    { padding: var(--ukl-space-7) 0; }
	.ukl-section-lg { padding: var(--ukl-space-8) 0; }
	.ukl-container, .ukl-container-wide, .ukl-container-narrow { padding: 0 var(--ukl-space-4); }
}