/* KOWEBS theme styles (front end + editor) */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Header */
.ko-header {
	padding-top: .6rem; padding-bottom: .6rem;
	background: rgba(5, 9, 20, .88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(56, 182, 255, .25);
	box-shadow: 0 1px 0 rgba(255, 106, 0, .25), 0 10px 30px rgba(0, 0, 0, .35);
}
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.ko-header__logo { margin: 0 !important; }
.ko-header__logo img { width: clamp(150px, 22vw, 220px) !important; height: auto; display: block; }

.ko-nav .wp-block-pages-list__item__link,
.ko-nav .wp-block-navigation-item__content { position: relative; padding: .4rem .2rem; }
.ko-nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
	background: linear-gradient(90deg, #ff6a00, #ffb300);
	transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.ko-nav .wp-block-navigation-item__content:hover::after,
.ko-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ko-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--ko-gold); }
.ko-nav .wp-block-navigation__container { gap: clamp(1rem, 3vw, 2.25rem); }

.wp-block-navigation__responsive-container.is-menu-open {
	background: #050914 !important; color: #d9e2f2 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.4rem; }

/* Main */
.ko-main { margin-top: 0 !important; padding-bottom: var(--wp--preset--spacing--60); }
.ko-main--front { padding-bottom: 0; }
.ko-main--front > .wp-block-post-content { margin-top: 0; }

/* Page title banner */
.ko-page-hero {
	margin-top: 0 !important; margin-bottom: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--50);
	background:
		radial-gradient(ellipse 60% 80% at 50% 0%, rgba(29, 123, 255, .35), transparent 70%),
		linear-gradient(180deg, #0a1230, #050914);
	border-bottom: 1px solid rgba(56, 182, 255, .2);
	position: relative; overflow: hidden;
}
.ko-page-hero::after {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: min(320px, 60%); height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, #ff4d00, #ffb300 50%, #1d7bff 50%, #4fc3ff);
}
.ko-page-hero__title {
	text-transform: uppercase;
	background: linear-gradient(180deg, #fff 0%, #d9e2f2 45%, #8ea0c8 56%, #fff 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 3px 0 #1d7bff);
}

/* Content */
.ko-lead { font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: #fff; max-width: 680px; margin-inline: auto !important; }
.ko-content h2.wp-block-heading:not(.has-text-align-center) {
	padding-left: .9rem; border-left: 4px solid var(--wp--preset--color--ko-orange);
}

/* Card grid */
.ko-grid { gap: 1.25rem !important; margin-top: var(--wp--preset--spacing--50) !important; margin-bottom: var(--wp--preset--spacing--50) !important; }
.ko-card {
	position: relative; height: 100%;
	padding: 1.6rem 1.5rem;
	border-radius: 18px;
	background: linear-gradient(180deg, #101b45 0%, #0a1230 100%);
	box-shadow: inset 0 0 0 1px rgba(56, 182, 255, .22), 0 14px 30px rgba(0, 0, 0, .35);
	transition: transform .25s ease, box-shadow .25s ease;
}
.ko-card::before {
	content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 3px; border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, #ff4d00, #ffb300);
}
.ko-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 179, 0, .45), 0 18px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(29, 123, 255, .25); }
.ko-card h3 { margin-top: .25rem; }
.ko-card p { color: #b9c6e6; }
.ko-card__kicker {
	margin: 0 !important; font-family: var(--wp--preset--font-family--display); font-size: .8rem;
	text-transform: uppercase; letter-spacing: .14em; color: var(--wp--preset--color--ko-gold);
}

/* Portfolio placeholders */
.ko-project { padding-top: 1.1rem; }
.ko-project__thumb {
	display: grid !important; place-items: center; aspect-ratio: 16 / 10;
	margin-bottom: .5rem; border-radius: 12px;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255, 138, 0, .45), transparent 55%),
		radial-gradient(ellipse at 75% 80%, rgba(29, 123, 255, .55), transparent 60%),
		#0a1230;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ko-project__num {
	margin: 0 !important; font-family: var(--wp--preset--font-family--display);
	font-size: 3rem; color: rgba(255, 255, 255, .85); text-shadow: 0 0 20px rgba(29, 123, 255, .8);
}

/* CTA */
.ko-cta {
	margin-top: var(--wp--preset--spacing--60) !important;
	padding: var(--wp--preset--spacing--50) clamp(1.25rem, 4vw, 3rem);
	border-radius: 24px;
	background:
		radial-gradient(ellipse 70% 120% at 0% 0%, rgba(255, 106, 0, .35), transparent 60%),
		radial-gradient(ellipse 70% 120% at 100% 100%, rgba(29, 123, 255, .45), transparent 60%),
		#0a1230;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ko-cta p { color: #d9e2f2; }

/* Footer */
.ko-footer {
	padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40);
	background: #03060e;
	border-top: 1px solid rgba(56, 182, 255, .2);
	margin-top: 0 !important;
}
.ko-footer .wp-block-image { margin: 0; }
.ko-footer__nav { font-size: .8rem !important; }
.ko-footer__copy { margin: 0; font-size: .85rem; color: var(--wp--preset--color--muted); }
@media (max-width: 700px) {
	.ko-footer > .wp-block-group { flex-direction: column; text-align: center; }
}

/* Buttons glow */
.wp-element-button { box-shadow: 0 6px 22px rgba(255, 106, 0, .35); transition: transform .2s ease, box-shadow .2s ease; }
.wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29, 123, 255, .45); }

/* Full-width header padding */
.ko-header { padding-left: clamp(1rem, 3vw, 2.5rem) !important; padding-right: clamp(1rem, 3vw, 2.5rem) !important; }