/*
 * Portfolio Custom — global styles that Elementor Site Settings cannot express.
 * Colours and fonts come from Elementor global variables with fallbacks.
 */
:root {
	--hk-bg: #071523;
	--hk-surface: #0d2032;
	--hk-raised: #13304a;
	--hk-border: #1e3a55;
	--hk-cyan: var(--e-global-color-primary, #00e5ff);
	--hk-blue: var(--e-global-color-secondary, #2f80ed);
	--hk-text: var(--e-global-color-text, #a8b8c8);
	--hk-heading: var(--e-global-color-accent, #f4f7fa);
	--hk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--hk-radius: 16px;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { background-color: var(--hk-bg); color: var(--hk-text); overflow-x: clip; }
::selection { background: rgba(0, 229, 255, .3); color: var(--hk-heading); }

/* Keyboard focus: visible on every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--hk-cyan) !important;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Hero backdrop: faint grid with a cyan glow (decorative). */
.hk-grid-bg {
	background-image:
		radial-gradient(60% 50% at 75% 30%, rgba(0, 229, 255, .16), transparent 70%),
		radial-gradient(40% 40% at 10% 90%, rgba(47, 128, 237, .14), transparent 70%),
		linear-gradient(rgba(30, 58, 85, .35) 1px, transparent 1px),
		linear-gradient(90deg, rgba(30, 58, 85, .35) 1px, transparent 1px);
	background-size: auto, auto, 48px 48px, 48px 48px;
}

/* Cards (Elementor containers with the hk-card class). */
.hk-card {
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hk-card:hover, .hk-card:focus-within {
	border-color: rgba(0, 229, 255, .45) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.hk-card .elementor-icon svg { fill: var(--hk-cyan); }
.e-loop-item { height: 100%; }
.e-loop-item > .e-con { height: 100%; }

/* Chips, tags and status badges. */
.hk-chips ul, .hk-chips .elementor-post-info { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.hk-chip, .elementor-widget-text-editor.hk-chips li, .elementor-widget-text-editor .hk-chips li, .hk-chips .elementor-post-info__terms-list-item {
	display: inline-block;
	font-family: var(--hk-mono);
	font-size: 12px;
	line-height: 1.4;
	padding: 4px 10px;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	color: var(--hk-text);
	background: rgba(13, 32, 50, .6);
}
.hk-chips .elementor-post-info__terms-list { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0; }
.hk-chips .elementor-post-info__terms-list-item { font-size: 12px; }
.elementor-widget-post-info.hk-chips .elementor-icon-list-item { border: 0; padding: 0; background: none; }
.hk-chips .elementor-post-info__terms-list a:hover { border-color: var(--hk-cyan); color: var(--hk-cyan); }
.hk-chips .elementor-post-info__terms-list-item { margin: 0 !important; }
.hk-badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--hk-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
	color: var(--hk-cyan); padding: 4px 12px; border: 1px solid rgba(0, 229, 255, .35); border-radius: 999px;
}
.hk-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hk-cyan); box-shadow: 0 0 8px var(--hk-cyan); }

/* Hero tagline: inline icon list (left on one line, centred when wrapped via portfolio.js). */
.hk-tagline .elementor-icon-list-items.elementor-inline-items {
	display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
	gap: 10px 22px; margin: 0 !important; padding: 0;
}
.hk-tagline .elementor-icon-list-items.is-wrapped { justify-content: center; }
.hk-tagline .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; gap: 8px; }
.hk-tagline .elementor-icon-list-item::after { display: none !important; }
.hk-tagline .elementor-icon-list-icon { display: inline-flex; padding: 0 !important; }
.hk-tagline .elementor-icon-list-icon svg { width: 18px; height: 18px; fill: var(--hk-cyan); }
.hk-tagline .elementor-icon-list-text {
	padding: 0 !important; color: var(--hk-cyan);
	font-family: var(--e-global-typography-primary-font-family, "Space Grotesk"), sans-serif;
	font-size: 22px; font-weight: 600; line-height: 1.3;
}
@media (max-width: 767px) {
	.hk-tagline .elementor-icon-list-items.elementor-inline-items { gap: 8px 16px; }
	.hk-tagline .elementor-icon-list-text { font-size: 18px; }
	.hk-tagline .elementor-icon-list-icon svg { width: 16px; height: 16px; }
}

.hk-nowrap .elementor-heading-title { white-space: nowrap; margin: 0; line-height: 1.1; }

/* Homepage highlights: carousel of horizontal cards (icon tile | title, subtitle, meta). */
.hk-stats-section { position: relative; z-index: 2; margin-top: -64px; }
.hk-stats-panel { position: relative; }
.hk-stats-carousel .swiper-slide { height: auto; }
/* Arrows sit in the panel's side padding, so the slider can use the full width
   (Elementor's outside-arrow mode would otherwise shrink it by 60px). */
.elementor-element.hk-stats-carousel.elementor-arrows-position-outside .swiper { width: 100% !important; }
.hk-hcard {
	position: relative; height: 100%; box-sizing: border-box;
	background: linear-gradient(180deg, rgba(16, 38, 60, .96) 0%, rgba(11, 28, 46, .96) 100%);
	border: 1px solid #1E3A55; border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hk-hcard:hover { border-color: rgba(0, 229, 255, .45); box-shadow: 0 18px 44px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 229, 255, .08); }
.hk-hcard .hk-hcard__icon { flex: none; align-self: center !important; } /* icon centred vertically; text stays top-aligned */
.hk-hcard .hk-hcard__body { --width: auto; width: auto; flex: 1 1 0; min-width: 0; }
.hk-hcard__title .elementor-heading-title, .hk-hcard__sub .elementor-heading-title { overflow-wrap: anywhere; }
.hk-hcard__meta .elementor-icon-list-item { flex-wrap: nowrap; align-items: flex-start !important; }
.hk-hcard__meta .elementor-icon-list-icon { margin-top: 3px; }
.hk-hcard__icon .elementor-icon-wrapper { line-height: 0; }
.hk-hcard__icon .elementor-icon {
	display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px;
	background: #13304A; border: 1px solid rgba(0, 229, 255, .18);
}
.hk-hcard__icon .elementor-icon svg { width: 20px; height: 20px; }
.hk-hcard__title .elementor-heading-title { margin: 0 0 8px !important; line-height: 1.25; letter-spacing: -.01em; } /* + 4px gap = 12px */
.hk-hcard__sub .elementor-heading-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #F4F7FA; }
.hk-hcard__meta .elementor-icon-list-items { margin: 0 !important; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.hk-hcard__body > .elementor-element { min-width: 0; max-width: 100%; }
.hk-hcard__meta .elementor-icon-list-item { min-width: 0; max-width: 100%; }
.hk-hcard__meta .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; gap: 6px; }
.hk-hcard__meta .elementor-icon-list-item::after { display: none !important; }
.hk-hcard__meta .elementor-icon-list-icon { display: inline-flex; padding: 0 !important; }
.hk-hcard__meta .elementor-icon-list-icon svg { width: 12px; height: 12px; fill: #8FA3B8; }
.hk-hcard__meta .elementor-icon-list-text { padding: 0 !important; font-size: 13px; color: #8FA3B8; line-height: 1.4; }

/* Desktop shows two cards side by side: reserve two title lines (2 × 1.25em) so the
   subtitles and meta lines start at the same level in every card. */
@media (min-width: 1025px) { .hk-hcard__title .elementor-heading-title { min-height: 2.5em; } }

/* Carousel arrows: round glass buttons on both sides. */
.hk-stats-carousel .elementor-swiper-button {
	position: absolute; top: 50% !important; transform: translateY(-50%); z-index: 3;
	width: 40px !important; height: 40px !important; display: flex !important; align-items: center; justify-content: center;
	border-radius: 50% !important; background: rgba(13, 32, 50, .9) !important; border: 1px solid rgba(0, 229, 255, .3) !important;
	padding: 0 !important; color: var(--hk-cyan); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hk-stats-carousel .elementor-swiper-button-prev { left: -52px !important; right: auto !important; }
.hk-stats-carousel .elementor-swiper-button-next { right: -52px !important; left: auto !important; }
.hk-stats-carousel .elementor-swiper-button svg { width: 14px !important; height: 14px !important; fill: var(--hk-cyan) !important; }
.hk-stats-carousel .elementor-swiper-button:hover, .hk-stats-carousel .elementor-swiper-button:focus-visible {
	background: rgba(0, 229, 255, .12) !important; border-color: var(--hk-cyan) !important; box-shadow: 0 0 16px rgba(0, 229, 255, .3);
}
@media (max-width: 1024px) { .hk-stats-section { margin-top: -48px; } }
@media (max-width: 767px) {
	.hk-stats-section { margin-top: -32px; }
	.hk-hcard .hk-hcard__body { align-self: center !important; justify-content: center !important; } /* phones: text block vertically centred */
	.hk-hcard__icon .elementor-icon { width: 42px; height: 42px; border-radius: 10px; }
	.hk-hcard__icon .elementor-icon svg { width: 18px; height: 18px; }
	.hk-stats-carousel .elementor-swiper-button { width: 30px !important; height: 30px !important; }
	.hk-stats-carousel .elementor-swiper-button svg { width: 12px !important; height: 12px !important; }
	.hk-stats-carousel .elementor-swiper-button-prev { left: -35px !important; }
	.hk-stats-carousel .elementor-swiper-button-next { right: -35px !important; }
}

/* Template field output from shortcodes. */
.hk-field { margin: 0 0 40px; }
.hk-field__label { font-size: 15px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--hk-cyan) !important; font-family: var(--hk-mono) !important; margin: 0 0 12px !important; }
.hk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hk-list li { position: relative; padding-left: 22px; }
.hk-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--hk-cyan); }
.hk-notice { border: 1px dashed var(--hk-border); border-radius: 12px; padding: 16px 20px; background: rgba(13, 32, 50, .6); font-size: 15px; }
.hk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.hk-gallery img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hk-border); }
.hk-button {
	display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 10px;
	font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .18s ease, color .18s ease;
}
.hk-button--secondary { border: 1px solid rgba(244, 247, 250, .3); color: var(--hk-heading); }
.hk-button--secondary:hover { border-color: var(--hk-cyan); color: var(--hk-cyan); }

/* Timeline (About page). */
.hk-timeline-item { position: relative; }
.hk-timeline-item::before {
	content: ""; position: absolute; left: -29px; top: 10px; width: 11px; height: 11px; border-radius: 50%;
	background: var(--hk-bg); border: 2px solid var(--hk-cyan);
}
@media (max-width: 767px) { .hk-timeline-item::before { left: -21px; } }

/* Long-form content: code, tables, images. */
.elementor-widget-theme-post-content, .hk-prose { font-size: 17px; }
.hk-prose a, .elementor-widget-theme-post-content a, .elementor-widget-text-editor a { color: var(--hk-cyan); text-underline-offset: 3px; }
pre, code, kbd { font-family: var(--hk-mono); }
:not(pre) > code { background: var(--hk-raised); padding: 2px 6px; border-radius: 6px; font-size: .9em; color: var(--hk-heading); }
pre { background: #0a1a2b; border: 1px solid var(--hk-border); border-radius: 12px; padding: 20px; overflow-x: auto; font-size: 14px; line-height: 1.6; color: var(--hk-heading); }
.elementor-widget-theme-post-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.elementor-widget-theme-post-content th, .elementor-widget-theme-post-content td { border: 1px solid var(--hk-border); padding: 10px 14px; text-align: left; }
.elementor-widget-theme-post-content img { border-radius: 12px; height: auto; }
.elementor-widget-theme-post-content blockquote { border-left: 3px solid var(--hk-cyan); margin: 24px 0; padding: 4px 0 4px 20px; color: var(--hk-heading); }

.hk-logo, .hk-logo .elementor-heading-title { white-space: nowrap; margin: 0; }

/* Loop filter (Projects). */
.e-filter-item { color: var(--hk-text) !important; font-family: var(--hk-mono); font-size: 13px !important; padding: 8px 14px !important; border: 1px solid var(--hk-border) !important; border-radius: 999px !important; background: transparent; }
.e-filter-item:hover { color: var(--hk-heading) !important; border-color: var(--hk-cyan) !important; }
.e-filter-item[aria-pressed="true"] { color: var(--hk-bg) !important; background: var(--hk-cyan) !important; border-color: var(--hk-cyan) !important; }
.e-filter { gap: 8px !important; }

/* Header becomes solid when sticky. */
.elementor-sticky--effects.hk-header { background-color: rgba(7, 21, 35, .92) !important; backdrop-filter: blur(10px); border-bottom-color: var(--hk-border) !important; }

/* Mobile menu toggle and dropdown contrast. */
.elementor-menu-toggle { border-radius: 8px; }

/* Forms. */
.elementor-field-group .elementor-field::placeholder { color: #7f93a8; opacity: 1; }
.elementor-message.elementor-message-success { color: #3ddc97; }
.elementor-message.elementor-message-danger, .elementor-error .elementor-field { color: #ff6b6b; }
.hk-hp { position: absolute !important; left: -9999px !important; }

/* Back to top. "html body button" outranks the Site Settings button style
   (.elementor-kit-N button: cyan background, 14px 26px padding) and Hello's reset. */
html body button.hk-to-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 50;
	box-sizing: border-box; width: 38px; height: 38px; min-width: 0; padding: 0; margin: 0;
	display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0;
	background: var(--hk-surface); color: var(--hk-cyan);
	border: 1px solid var(--hk-border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
	cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s, border-color .18s ease;
}
html body button.hk-to-top svg { display: block; width: 16px; height: 16px; flex: none; }
html body button.hk-to-top.is-visible { opacity: 1; visibility: visible; }
html body button.hk-to-top:hover, html body button.hk-to-top:focus-visible { background: var(--hk-raised); color: var(--hk-cyan); border-color: var(--hk-cyan); }
@media (max-width: 767px) { html body button.hk-to-top { right: 16px; bottom: 16px; } }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.hk-card:hover, .hk-card:focus-within { transform: none; }
}