/*
 * Morningstar AI brand layer for Tekni.
 * Loaded after Tekni's main stylesheet (tekni-main-style). Source of truth for
 * colours and type: Morningstar AI BrandKit/CLAUDE.md.
 */

/* ---------- Tokens ---------- */

:root {
	/* Brand palette */
	--ms-ink: #0A0A0A;
	--ms-graphite: #555555;
	--ms-silver: #A3A3A3;
	--ms-paper: #FFFFFF;
	--ms-mist: #F4F4F5;
	--ms-line: #E4E4E7;
	--ms-muted: #71717A;
	--ms-charcoal: #2B2B2E;

	/* Brand type */
	--ms-font-serif: 'Cormorant Garamond', Georgia, serif;
	--ms-font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
	--ms-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Tekni variables mapped onto the brand */
	--font-default: var(--ms-font-sans);
	--font-heading: var(--ms-font-serif);
	--font-secondary: var(--ms-font-mono);

	--black: var(--ms-ink);
	--dark: var(--ms-ink);
	--dark-secondary: var(--ms-charcoal);
	--white: var(--ms-paper);
	--color-primary: var(--ms-ink);
	--color-secondary: var(--ms-graphite);
	--color-style-two: var(--ms-graphite);
	--color-style-three: var(--ms-silver);
	--color-style-four: var(--ms-graphite);
	--color-style-five: var(--ms-silver);
	--blue: var(--ms-ink);
	--color-heading: var(--ms-ink);
	--color-paragraph: var(--ms-muted);
	--bg-gray: var(--ms-mist);

	--box-shadow-primary: -1px 3px 10px 0 rgba(10, 10, 10, 0.35);
	--box-shadow-secondary: 0 10px 30px 0 rgba(10, 10, 10, 0.18);
	--box-shadow-regular: 0 2px 12px 0 var(--ms-line);

	--bg-gradient: linear-gradient(90deg, var(--ms-ink) 0%, var(--ms-charcoal) 100%);
	--bg-gradient-secondary: linear-gradient(0deg, var(--ms-ink) 0%, var(--ms-charcoal) 100%);
	--bg-gradient-two: linear-gradient(90deg, var(--ms-graphite) 0%, var(--ms-silver) 100%);
	--gradient-bg: var(--bg-gradient);
}

/* ---------- Type ---------- */

body {
	font-family: var(--ms-font-sans);
	color: var(--ms-muted);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ms-font-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ms-ink);
}

/* Eyebrow labels: mono, small caps style, flat ink instead of Tekni's gradient text */
.sub-title,
.sub-heading {
	font-family: var(--ms-font-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--ms-graphite);
	border-color: var(--ms-line);
}

/* Hero eyebrow ("AUTOMATE THE FUTURE" slot) */
.banner-style-three .content h4 {
	font-family: var(--ms-font-mono);
	font-size: 15px;
	letter-spacing: 0.18em;
	color: var(--ms-graphite);
}

.bg-dark .sub-title,
.bg-dark .sub-heading,
.bg-gradient .sub-title,
.bg-gradient .sub-heading {
	color: var(--ms-silver);
}

/* ---------- Leftover demo colours ---------- */

.animate-inout,
.animate-inout.animate-inout-borde::after {
	background: var(--bg-gradient);
}

.feature-style-three-items,
.full-border .feature-style-three-items,
.feature-style-three {
	border-color: var(--ms-line);
}

.btn-animate .button-text {
	color: var(--ms-ink);
}

.progress-style-one .progress-box .progress {
	background: var(--ms-line);
}

ul.tech-index-items li a {
	background: linear-gradient(45deg, var(--ms-charcoal) 0%, #3A3A3E 100%);
}

.services-style-three {
	background: linear-gradient(164deg, var(--ms-mist) 0%, var(--ms-paper) 60%);
}

.services-style-three .icon {
	background: linear-gradient(45deg, var(--ms-ink) 40%, var(--ms-graphite) 100%);
}

/* Demo artwork that still carries colour: render it in greyscale */
.services-style-three .icon img,
.partner-map {
	filter: grayscale(1);
}

.nav.nav-tabs.mission-tab-navs {
	background: linear-gradient(45deg, var(--ms-paper) 0%, var(--ms-mist) 100%);
}

/* Star ratings: keep them in the monochrome palette */
.fa-star,
.fas.fa-star {
	color: var(--ms-ink);
}

/* Footer logo: never wider than its column (the 800w lockup overflowed on phones) */
footer .f-item.about img.logo {
	max-width: min(100%, 260px);
	height: auto;
}

/* Accordions: Bootstrap's open-state blue becomes ink */
.accordion {
	--bs-accordion-active-color: var(--ms-ink);
	--bs-accordion-active-bg: transparent;
	--bs-accordion-btn-focus-border-color: var(--ms-line);
	--bs-accordion-btn-focus-box-shadow: none;
}

.about-style-one .accordion-single .accordion-button {
	font-family: var(--ms-font-serif);
	font-weight: 600;
	color: var(--ms-ink);
}

/* ---------- Products ---------- */

/* Listing tags: Tekni's pink outline becomes a mono label */
.project-style-three-info .pf-tags li,
.color-style-two .project-style-three-info .pf-tags li {
	border-color: var(--ms-line);
	font-family: var(--ms-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ms-graphite);
}

/* Detail pages: challenge / plan lists with a bold lead-in */
.ms-detail-list li {
	margin-bottom: 12px;
	line-height: 1.7;
}

.ms-detail-list li strong {
	color: var(--ms-ink);
	font-weight: 600;
}

/* Tekni's navy-tinted card shadows, made neutral */
.choose-us-style-thumb .fun-fact,
.process-style-three,
.pricing-style-two,
.services-style-five .item,
.blog-style-one,
.blog-style-four,
.contact-form-style-one {
	box-shadow: 0 15px 60px -10px rgba(10, 10, 10, 0.18);
}

.services-style-one-item,
.services-more .item,
.team-style-two .info::after,
.testimonial-style-two,
.services-style-two .thumb .title::after,
.mission-vission-navs .nav-tabs,
.bg-gray .blog-style-one {
	box-shadow: 0 5px 3px rgba(10, 10, 10, 0.06);
}

/* ---------- Main navigation ---------- */

/* Logo and menu on one row, menu pushed right beside the search / side-menu icons (as in the Tekni demo) */
@media (min-width: 1024px) {
	.navbar .nav-box {
		flex-wrap: nowrap;
	}

	.navbar .nav-box .navbar-header {
		flex: 0 0 auto;
	}

	.navbar .nav-box .navbar-brand img.logo {
		height: 40px;
		width: auto;
	}

	.navbar .nav-box .main-nav-content {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		min-width: 0;
		justify-content: flex-end;
		align-items: center;
	}

	/* Menu hugs the icons: it sizes to its links and is pushed to the end of the row */
	.navbar .nav-box .main-nav-content > .navbar-collapse {
		float: none;
		flex: 0 1 auto;
		margin-left: auto;
	}

	.navbar .nav-box .main-nav-content .navbar-nav {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.navbar .nav-box .attr-right {
		float: none;
		flex: 0 0 auto;
		margin-left: 24px;
	}
}

/* Tighter link spacing where the row gets narrow */
@media (min-width: 1024px) and (max-width: 1279px) {
	.navbar.validnavs.navbar-default .navbar-nav > li > a {
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 14px;
	}

	.navbar .nav-box .navbar-brand img.logo {
		height: 30px;
	}

	.navbar .nav-box .attr-right {
		margin-left: 12px;
	}
}

/* Side panel: Tekni capitalises each word, which turns the email into "Info@Morningstarzw.Tech" */
.side .widget.address strong,
.side .widget.address strong a {
	text-transform: none;
}

/* Top bar "Get Consultant" label in the UI sans */
.top-bar-area .call-entry h5,
.top-bar-area .call-entry h5 a {
	font-family: var(--ms-font-sans);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

/* Login item: small lock icon before the label */
.navbar-nav > li.ms-nav-login > a::before {
	content: "\f023";
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	margin-right: 6px;
	font-size: 0.85em;
}

/* ---------- Coming soon (Login) ---------- */

.ms-coming-soon {
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 0 20px;
	text-align: center;
}

.ms-coming-soon-label {
	font-family: var(--ms-font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ms-muted);
}

.ms-coming-soon h2 {
	font-size: 40px;
	margin: 10px 0 18px;
}

.ms-coming-soon-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

/* ---------- Footer ---------- */

/* Mark-only logo and the catchphrase underneath it */
footer .f-item.about img.logo[src*="morningstar-ai-mark-"] {
	width: 64px;
	max-width: 64px;
}

footer .f-item.about > p {
	font-family: var(--ms-font-mono);
	font-size: 13px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ms-silver);
}

/* Newsletter feedback and spam trap */
.ms-nl-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ms-nl-message {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--ms-silver);
}

.ms-nl-message:empty {
	display: none;
}

.ms-nl-message.is-error {
	color: var(--ms-paper);
	text-decoration: underline;
}

.newsletter-form.is-sending {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------- Legal pages ---------- */

.ms-legal-updated {
	font-family: var(--ms-font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ms-muted);
}

.page--content h2 {
	margin-top: 40px;
	font-size: 28px;
}

.ms-legal-table {
	width: 100%;
	margin: 20px 0 30px;
	border-collapse: collapse;
	font-size: 15px;
}

.ms-legal-table th,
.ms-legal-table td {
	padding: 12px 14px;
	border: 1px solid var(--ms-line);
	vertical-align: top;
	text-align: left;
}

.ms-legal-table th {
	background: var(--ms-mist);
	font-family: var(--ms-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ms-ink);
}

@media (max-width: 575px) {
	.ms-legal-table,
	.ms-legal-table tbody,
	.ms-legal-table tr,
	.ms-legal-table td {
		display: block;
	}

	.ms-legal-table thead {
		display: none;
	}

	.ms-legal-table td + td {
		border-top: 0;
		color: var(--ms-muted);
	}
}

/* ---------- Contact ---------- */

/* Tekni gives the second contact icon its own teal; keep all three in ink */
.contact-style-one-info li i,
.contact-style-one-info li:nth-child(2) i {
	background: var(--ms-ink);
	color: var(--ms-paper);
}

/* Contact Form 7 status messages in the palette */
.wpcf7 form .wpcf7-response-output {
	border-color: var(--ms-graphite);
	color: var(--ms-ink);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ms-ink);
}

.wpcf7-not-valid-tip {
	color: var(--ms-ink);
	font-size: 13px;
}

/* Top bar links inherit the bar's text colour */
.top-bar-area a {
	color: inherit;
}

/* ---------- Pricing ---------- */

/* No empty discount badge next to prices */
.pricing-style-two .price .discount:empty {
	display: none;
}

/* Process: four steps in one row on desktop (Tekni lays out three) */
@media (min-width: 992px) {
	.process-style-two-area .col-lg-4 {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* Stage label above each process step description
   (reset Tekni's ".process-style-two span" number-badge styles, which also hit this span) */
.process-style-two .ms-stage,
.ms-stage {
	position: static;
	width: auto;
	height: auto;
	line-height: 1.4;
	border-radius: 0;
	background: none;
	padding: 0;
	display: block;
	margin-bottom: 8px;
	font-family: var(--ms-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ms-silver);
}

/* ---------- Homepage components ---------- */

/* Feature card icon tiles: Tekni's pink / lavender / mint gradients become Mist */
.feature-style-two i::after,
.feature-style-two .icon::after,
.feature-style-two-area .row > div:nth-child(2) i::after,
.feature-style-two-area .row > div:nth-child(2) .icon::after,
.feature-style-two-area .row > div:nth-child(3) i::after,
.feature-style-two-area .row > div:nth-child(3) .icon::after {
	background: linear-gradient(45deg, var(--ms-line) 0%, var(--ms-paper) 100%);
}

.feature-style-two i {
	color: var(--ms-ink);
}

/* Hero on phones/tablets: the photo sits behind the headline, so fade it to a texture for legibility */
@media (max-width: 991px) {
	.banner-style-three .banner-thumb {
		opacity: 0.16;
	}
}

/* Hero: no client star rating until there are real reviews */
.banner-style-three .content > ul {
	display: none;
}

/* About: hide the demo founder block (portrait + signature) until a real photo is supplied */
.about-style-three .company-autor {
	display: none;
}

/* Service cards: "Key deliverables" list inside the description */
.ms-deliverables {
	display: block;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--ms-line);
}

.ms-deliverables > span {
	display: block;
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.6;
}

.ms-deliverables > span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1px;
	background: currentColor;
}

.ms-deliverables > .ms-deliverables-label {
	padding-left: 0;
	margin-bottom: 6px;
	font-family: var(--ms-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}

.ms-deliverables > .ms-deliverables-label::before {
	display: none;
}

/* Comment form button (Tekni's unit-test.css gives its hover fill a navy) */
button.btn::after {
	background-color: var(--ms-charcoal);
}

/* ---------- Selection and focus ---------- */

::selection {
	background: var(--ms-ink);
	color: var(--ms-paper);
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ms-graphite);
	outline-offset: 2px;
}