/* ----------------------------------------------------------------
	GrafArt: Design & Printing Company
	Based on xCanvas Academic Demo
	Theme: CMYK inspired — Primary cyan from logo
-----------------------------------------------------------------*/

/* REMOVED: Duplicate @import of Google Fonts — already loaded in BaseLayout.astro head
   This was causing an extra render-blocking request (font-icons.css also loads it)
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
*/

:root {
	--cnvs-themecolor: #00A8CC;
	--cnvs-themecolor-rgb: 0, 168, 204;

	--cnvs-body-font: "Roboto", sans-serif;
	--cnvs-primary-font: "Roboto", sans-serif;

	--cnvs-side-header-width: 280px;

	--cnvs-body-bg: #FFF;
	--cnvs-side-header-bg: #F5F5F5;
}

body.dark {
	--cnvs-body-bg: #121212;
}

#header {
	--cnvs-primary-menu-font-weight: 400;
	--cnvs-primary-menu-font-size: .85rem;
	--cnvs-primary-menu-tt: uppercase;
	--cnvs-primary-menu-ls: 1px;
	--cnvs-primary-menu-color: var(--cnvs-contrast-800);
	--cnvs-primary-menu-hover-color: var(--cnvs-contrast-1000);
	--cnvs-header-border-color: var(--cnvs-contrast-400);
	box-shadow: none !important;
}

.dark #header {
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
	--cnvs-header-border-color: var(--cnvs-contrast-200);
}

body:not(.dark) .divider {
	--cnvs-divider-border-color: var(--cnvs-contrast-400);
}

.side-header:not(.is-expanded-menu) .container {
	max-width: none;
}

.is-expanded-menu.side-header .container {
	--cnvs-side-header-padding-gutters: 50px;
}

.is-expanded-menu .menu-item,
.is-expanded-menu .menu-item.current {
	padding: 7px 12px;
	margin: 0 !important;
	margin-top: 0.25rem !important;
	border: 1px solid transparent !important;
}

.is-expanded-menu .menu-item:hover,
.is-expanded-menu .menu-item.current {
	background-color: var(--cnvs-contrast-100);
	border-color: var(--cnvs-contrast-1000) !important;
	border-radius: 4px;
}

.dark.is-expanded-menu .menu-item:hover,
.dark.is-expanded-menu .menu-item.current {
	background-color: var(--cnvs-contrast-200);
	border-color: var(--cnvs-themecolor) !important;
}

/* Experience / Process Features */
.experience-features .feature-box {
	--cnvs-featured-box-icon: 2rem;
	--cnvs-featured-box-plain-font-size: 2rem;
}

.dark .entry-title h3 a {
	--cnvs-post-title-font-color: var(--cnvs-themecolor);
}

.social-lists.list-group {
	--bs-list-group-bg: transparent;
	--bs-list-group-item-padding-x: 0;
	--bs-list-group-color: var(--cnvs-contrast-1000);
}

.body-scheme-toggle {
	position: fixed;
	top: 100px;
	right: 30px;
	z-index: 9;
}

.is-expanded-menu .body-scheme-toggle {
	top: 30px;
}

/* Services grid */
.services-grid .feature-box {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-grid .feature-box:hover {
	transform: translateY(-4px);
}

/* Process steps */
.process-step {
	text-align: center;
	padding: 1.5rem;
}

.process-step .step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--cnvs-themecolor);
	color: #fff;
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

/* Testimonials */
.testimonial-card {
	border-left: 3px solid var(--cnvs-themecolor);
	padding-left: 1.5rem;
}

/* Portfolio gallery — explicit aspect ratio to prevent CLS */
.portfolio-item img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s ease;
}

.portfolio-item:hover img {
	transform: scale(1.03);
}

/* Logo in header — natural image: 300×253 (wider than tall) */
.header-logo-img {
	width: 80px;
	height: auto;
	aspect-ratio: 300 / 253;
	object-fit: contain;
}

/* Font override */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div {
	font-family: "Roboto", sans-serif !important;
}

/* Back to Top — use Bootstrap Icons instead of removed Unicons */
#gotoTop::before {
	font-family: "bootstrap-icons" !important;
	content: "\F148";
	/* bi-arrow-up */
}

/* ============================================================
   CONTRAST & ACCESSIBILITY FIXES
   ============================================================ */

/* Fix: Improve text contrast — op-06 and op-07 classes are too low-contrast.
   Override to meet WCAG AA 4.5:1 minimum ratio. */
.op-06 {
	opacity: 0.75 !important;
}

.op-07 {
	opacity: 0.85 !important;
}

.op-08 {
	opacity: 0.9 !important;
}

/* Fix: Links must be distinguishable not just by color — add underline on hover */
a:not(.btn):not(.button):not(.card):not(.social-icon):not(.menu-link):not(.list-group-item a) {
	text-decoration-color: transparent;
	transition: text-decoration-color 0.2s ease;
}

a:not(.btn):not(.button):not(.card):not(.social-icon):not(.menu-link):hover {
	text-decoration: underline;
}

/* Fix: Footer copyright contrast */
#copyrights p,
#copyrights a {
	opacity: 1 !important;
}


/* ============================================================
   RESPONSIVE MOBILE FIXES
   ============================================================ */

/* Prevent horizontal overflow */
html,
body {
	overflow-x: hidden;
}

/* Move light/dark toggle to top-left on mobile so it doesn't overlap content */
@media (max-width: 991.98px) {
	.body-scheme-toggle {
		top: 8px;
		right: 50px;
		z-index: 99;
		width: 32px;
		height: 32px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.75rem;
		border-radius: 50%;
		opacity: 0.85;
	}

	/* Tighter page padding on mobile */
	.content-wrap {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* Smaller section padding */
	.page-section {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	/* Portfolio grid — 2 columns on mobile */
	.portfolio-item img {
		height: 160px;
	}

	/* Services cards — tighter on mobile */
	.card-img-top {
		height: 140px !important;
	}

	/* Copyright text wrap */
	#copyrights p {
		font-size: 0.72rem !important;
		line-height: 1.5;
	}
}

/* Extra small screens */
@media (max-width: 575.98px) {

	.heading-block h3,
	.heading-block .h3 {
		font-size: 1.3rem !important;
	}

	.heading-block span,
	.heading-block p {
		font-size: 0.85rem;
	}

	/* Process steps — wrapping */
	.feature-box {
		padding: 0.5rem !important;
	}
}

/* ============================================================
   LIGHTBOX MODAL (Portfolio Gallery)
   ============================================================ */

.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	cursor: pointer;
}

.lightbox-overlay.active {
	opacity: 1;
	visibility: visible;
}

.lightbox-overlay img {
	max-width: 90vw;
	max-height: 75vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
	color: #fff;
	text-align: center;
	margin-top: 1rem;
	max-width: 500px;
}

.lightbox-caption h5,
.lightbox-caption .h5 {
	margin-bottom: 0.25rem;
	color: var(--cnvs-themecolor);
}

.lightbox-caption p {
	font-size: 0.85rem;
	opacity: 0.8;
	margin: 0;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	z-index: 10000;
	opacity: 0.7;
	transition: opacity 0.2s;
	background: none;
	border: none;
	line-height: 1;
}

.lightbox-close:hover {
	opacity: 1;
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	z-index: 10000;
	opacity: 0.6;
	transition: opacity 0.2s;
	background: none;
	border: none;
	padding: 1rem;
}

.lightbox-nav:hover {
	opacity: 1;
}

.lightbox-prev {
	left: 20px;
}

.lightbox-next {
	right: 20px;
}

/* Portfolio items — cursor pointer for clickable */
.portfolio-item {
	cursor: pointer;
}

/* ============================================================
   REDUCE NON-COMPOSITED ANIMATIONS
   Fix: Ensure transitions use GPU-composited properties where possible
   ============================================================ */
.portfolio-item img,
.services-grid .feature-box,
.timeline-dot,
.timeline-card {
	will-change: transform;
}